CSS-利用border属性画三角形和梯形

首先，看一下border的延申效果：
定义一个正常显示的div
.triangle {
height: 200px;
width: 300px;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid black;
border-left: 50px solid yellow;
}
效果如图

可以发现，border的延申效果是成梯形的一个线条。那么，如果我们把中间div的大小设置为0，那么中间的白色区域则为一个点，即梯形中的一边消失，即可实现绘制三角形的目的。

三角形
修改如下：
.triangle {
height: 0px;
width: 0px;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid black;
border-left: 50px solid yellow;
}
效果如图

通过修改各边延申长度，可生产不规则三角形：
.triangle {
height: 0px;
widt