简单用CSS实现画三角形角标

最近初学CSS做练习时发现这么一个问题，一个列表将前面的标志自定义成三角形，而CSS里默认时没有提供三角形的，我自己的想法实在不行找个图片放在前面也未尝不可，但是这样会增加文件大小，会增加加载时间。后来上网找到了一个比较简单的方法。

一、这时html和css代码，中间空白的小方格是40*40的，利用border属性将边框宽度设为30px;宽度向外延伸，最后得到如图正方形。


二、将宽高改为0，得到如下图，即中间为0；



三、将border的上边颜色保留，右下左边设定为透明即可得到三角形，若要其他方向三角形只需将对应颜色保留，其他透明即可。