css画三角的原理
当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片
此时如果设置这个div的height为0的话,其他不变,会得到下面这个图形
下面把其宽度也设置为0后,得到如下的一张图片
删除border-bottom
设置border-left border-right 颜色为transparent
根据上面我们就可以根据不同的设置,实现各种三角形
总结如下:
.demo { width: 0px; height: 0px; margin: 100px auto; border-top:100px solid #000; border-right:100px solid transparent; border-left:100px solid transparent; }
.demo { width: 0px; height: 0px; margin: 100px auto; border-bottom:100px solid blue; border-right:100px solid transparent; border-left:100px solid transparent; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207094156460-123538015.png)
.demo { width: 0px; height: 0px; margin: 100px auto; border-top:100px solid transparent; border-bottom:100px solid transparent; border-right:100px solid red; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207094236647-1297509892.png)
.demo { width: 0px; height: 0px; margin: 100px auto; border-top:100px solid transparent; border-bottom:100px solid transparent; border-left:100px solid #00ff00; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207094331569-1121239073.png)
.demo { width: 0px; height: 0px; margin: 100px auto; border-bottom:100px solid blue; border-left:100px solid transparent; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207094359866-2075712580.png)
.demo { width: 0px; height: 0px; margin: 100px auto; border-top:100px solid #transparent; border-left:100px solid #00ff00; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207094647351-1590384202.png)
.demo { width: 0px; height: 0px; margin: 100px auto; border-top:100px solid #000; border-left:100px solid trnasparent; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207094417194-911716777.png)
.demo { width: 0px; height: 0px; margin: 100px auto; border-bottom:100px solid transparent; border-left:100px solid #00ff00; }
![](https://images2015.cnblogs.com/blog/992473/201612/992473-20161207095452382-2028637594.png)