CSS画出三角形（利用Border）

画出三角形的原理是调整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; }

 

转载于:https://www.cnblogs.com/ruoh3kou/p/9994534.html