通过设置 宽和高为0 ，改变 border-color 属性即可实现三角形效果。
在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割。
首先，我们画一个div，给div加上border，看看盒子模型本来的样子
梯形：
由此可见，css绘制的梯形并不是一个容器，只是容器的一条边。css把容器的其余三条边设置为透明的，只显示需要的一条边，就是一个梯形了。
直角梯形
三角形
盒子模型分为两种，一种是border-box，一种是center-box。低版本的ie中是border-box,在新的浏览器中，我们可以把容器的宽高设计为0或者特地设置box-sizing: border-box。
来看看border-box的效果：
由此可见，当设置为border-box时，border的大小包含在容器大小之内,我们可以通过显示某条边来制作三角形
border-box画直角三角形
center-box:
与border-box一样，可以根据控制border的width和方向来画出自己想要的三角形
