今天遇到一个无序列表，每一行的开始都要用一个小三角形，像这样，如果在以前，我肯定直接放图片进去了，然而学习了CSS后，我认为CSS一定能完成这个小图形。


关键需要把元素的宽度、高度设为0。


原理如下：

首先，写一个with和height都是40px的div，border宽度也是40px，看看是什么效果？

HTML代码：

<divclass="triangle"></div>

css代码：

.triangle{width:40px;height:40px;border-left:40pxsolid#000;/*左边框*/border-right:40pxsolid#000;/*右边框*/border-top:40pxsolid#00F;/*上边框*/border-bottom:40pxsolid#00F;/*下边框*/}

效果如下：

然后，将这个div的width和height无限缩小，是什么效果呢？

HTML代码：

<divclass="triangle"></div>

css代码：

.triangle{width:0px;/*div宽设置为0*/height:0px;/*div高设置为0*/border-left:40pxsolid#000;/*左边框*/border-right:40pxsolid#000;/*右边框*/border-top:40pxsolid#00F;/*上边框*/border-bottom:40pxsolid#00F;/*下边框*/}

效果如下：

看到了吗，只剩下40px的边框，而div盒子的宽和高为0，这时已经是4个三角形组成的正方形了。这样，我们需要哪个方向的三角形，只要让border的一边取消，另两边透明即可！

比如我们需要尖角向上的三角形：

.triangle{width:0px;/*div宽设置为0*/height:0px;/*div高设置为0*/border-left:40pxsolidtransparent;/*左边框透明*/border-right:40pxsolidtransparent;/*右边框透明*//*上边框取消*/border-bottom:40pxsolid#00F;/*下边框*/}

效果如下：

如此，一个尖角向上的三角形就可以用CSS绘制完成！需要其他样式三角形也是同理！