css3实现三角的原理

原文链接http://www.cnblogs.com/huangzhilong/p/5030659.html

参考链接：http://caibaojian.com/css-border-triangle.html

当我们设置一个div其width与height为100px，并且设置其四边框的宽度为100px，且分别设置其颜色后，我们可以看到如下的一张图片

 

 

此时如果设置这个div的height为0的话，其他不变，会得到下面这个图形

 

 

下面把其宽度也设置为0后，得到如下的一张图片

所以这就是我们把width，height设置为0后得到的效果，是不是出乎意料的竟然有点好看。。好了接下来看我们的正式讲解