最近初学CSS做练习时发现这么一个问题,一个列表将前面的标志自定义成三角形,而CSS里默认时没有提供三角形的,我自己的想法实在不行找个图片放在前面也未尝不可,但是这样会增加文件大小,会增加加载时间。后来上网找到了一个比较简单的方法。
一、这时html和css代码,中间空白的小方格是40*40的,利用border属性将边框宽度设为30px;宽度向外延伸,最后得到如图正方形。
二、将宽高改为0,得到如下图,即中间为0;
三、将border的上边颜色保留,右下左边设定为透明即可得到三角形,若要其他方向三角形只需将对应颜色保留,其他透明即可。