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;
width: 0px;
border-top: 50px solid red;
border-right: 30px solid green;
border-bottom: 40px solid black;
border-left: 20px solid yellow;
}
效果如图

要生产任意形状的三角形，只需要把其他三个方向的颜色变成背景颜色即可（这里是白色）
修改如下：
.triangle {
height: 0px;
width: 0px;
border-top: 50px solid red;
border-right: 30px solid white;
border-bottom: 40px solid white;
border-left: 20px solid white;
}
效果如图

类似地，想要生成梯形 则需要将div大小设置为非0的任意值，并将三个方向的颜色变成背景颜色即可（这里是白色）：
.triangle {
height: 5px;
width: 5px;
border-top: 50px solid red;
border-right: 30px solid white;
border-bottom: 40px solid white;
border-left: 20px solid white;
}
效果如图：