用css构建一个三角形

用css“画”一个三角形的原理就是利用边框重叠。
1.首先看一下“画”四个梯形的思路：构建一个div块，并且让其四周都有边框：

div{width:80px;height:80px;border-bottom:20px #000 solid;border-top:20px red solid;border-left:20px blue solid;border-right:20px green solid;}

得到如下图所示的四个梯形：

其实我们所看到的这四个梯形是这个div块的四个边框。至于为什么每两个边框冲突时都会产生一个斜边，原因如下：
假设现在去掉最下面黑色的边框，结果如下：

因此，左边斜线以左蓝色部分属于左边框，右边斜线以右绿色部分属于边框。其他几个斜线同理。
2.接着”画“四个三角形。由于上面宽度的设置，中间content部分仍然具有宽高导致四周构成梯形，那么可以把中间content部分宽高设为0，即可得到四个等腰三角形。

div{width:0;height:0;border-bottom:20px #000 solid;border-top:20px red solid;border-left:20px blue solid;border-right:20px green solid;}

结果如图：

此时，我们可以根据自己的需要得到顶点朝向任意方向的三角形。例如要得到最低端的黑色三角形，只需将其他三个方向的边框颜色设置为透明即可。

div{width:0;height:0;border-bottom:100px #000 solid;border-top:100px transparent solid;border-left:100px transparent solid;border-right:100px transparent solid;}

得到的结果如图：

3.“画”一个等边三角形。
方法和三角形的原理相似，只是在确定边的时候进行数学计算即可。通过边框比例1比根号3，让其三角形夹脚一半儿为30度从而做出60度的正三角形。

div{width:0;height:0;border-bottom:173px #000 solid;border-top:173px transparent solid;border-left:100px transparent solid;border-right:100px transparent solid;}

得到的结果如图：