剖析CSS三角形原理

先来一个简单的三角形案例：

width: 0px;
height: 0px;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid red;

页面效果如图：

边框排列方式

我不明白为什么画出会是一个三角形呢？在我的理解中，边框应该是这样的

一直以来也没有深入研究过这个，所以这个错误一直跟到了现在。

实际上正确的边框排列方式是这样的：

看清楚了，边框是呈梯形排列的，现在明白为什么了吧！

但是画三角形还有一个重要因此，那就是高度和宽度必须为0。

当width属性有值时，无论边框是的值有多宽，始终不会影响width属性的值。so，如果画一个三角形，就必须把width和height属性的值设为0。（标准盒模型原理）

transparent

作用就是将颜色设置为透明的。

所以我们就能看到一个三角形了。