使用CSS盒模型中的border（边框）即可实现如下所示的三角形：
.box {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:#FFCCCC transparent transparent transparent;
}
请看下面这段代码：
.box {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:rosybrown yellow green blueviolet;
}
演示效果：
看到这个图片你会有什么想法，无论你想要哪个方向的三角形都可以做到了。
主要通过 border-with 来实现的再通过 border-color 显示该三角的。其中 transparent 代表着透明。
注：其实我们还可以通过，利用CSS3里面的旋转，来实现不能角度的三角形，那就是 transform:rotate(180deg)，角度自行设置吧
原文：https://www.cnblogs.com/gaoht/p/11690392.html