对于商品列表的情况下，需要给商品增加一些特定的标示来更充分的展示表达该商品独特的属性。例如热销，hot，最新，new，上新，待售，下架等。这个时候美工或前端就需要一个好的UI来展示。此时需要做一张小图片来展示在图片左上角或者右上角等。如下图展示所示:

这里的关键在于制作一张小图片，其实是正方形。但是下三角位透明的而已。对于一枚程序员来说。ps功底本来就薄弱。此处献丑了，还望各位大神多多指教。

第一步：新建一个图片（200*200px）。背景色橘红色（#ff5800）.

第二步：输入文字“上新”。使用白色字体。使用编辑--自由变换--把字体排版成斜着的--合并可见图层。

第三步：新建一个图片（200*200px）。背景色位透明.

第四步：回到橘红色的图片，使用多边形套索工具，小心翼翼的选择你需要的三个点，呈现选中状态。如下图。

第五步：使用移动工具-拖动到新建的透明背景图的窗口。调整一下保存即可。png格式的。

至此，小图片制作成功。下一篇文章我讲讲述如何把这个小图片放置在大图片的上一层。

HTML中CSS实现图片左上角展示热销的小图片

虽然我们都生于尘土，终于尘土，但是活着的过程就是一段美丽的舞蹈。每个人都朝着不同的方向在生长，所以找到一个与自己匹配的伴侣很难。