画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。

如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。

div{
               width: 200px;            height: 100px;            border-left: 50px solid yellow;            border-right: 50px solid blue;            border-top: 50px solid red;            border-bottom: 50px solid black;        }

 

这个时候如果将盒模型内部的height，width调为0px，根据颜色（transparent）组合成不同的三角形。

div{
               width: 0px;            height: 0px;            border-left: 50px solid yellow;            border-right: 50px solid blue;            border-top: 50px solid red;            border-bottom: 50px solid black;        }

 

最少需要两条边才能构成一个三角形

div{

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-top: 100px solid red;

}