用css绘制梯形或者其他多边形其实是巧妙利用border来实现的。首先我们先看一个图形
其代码是
.tixing{
height: 0;
width: 0;
border-top: red 70px solid;
border-right: blue 70px solid;
border-bottom: green 70px solid;
border-left: yellow 70px solid;
}
<div class=”tixing”>
以上例子可以看出，这个div宽高都为0，这个图案纯粹是用border来凑出来的。如果我们想画一个三角形，那么就可以只保留 border-bottom，其他的颜色都改成transparent 就可以。
再延伸一下，如果此时我们只保留 border-right或 border-left，可以看到图案是空白的，保留bottom或top，则是一个长方形，这一点可以看出top和bottom是这样绘图的基础，也就是说不管想绘制什么图形， border-top和 border-bottom必须存在一个（如果宽高不为0就另当别论了）。有了 border-top或 border-bottom为基础，再添加 border-left或 border-right就可以组成想要的图案了。（形象点描述就是border-left或 border-right就像在 border-top和 border-bottom的基础上把 border-top和 border-bottom“吃”进一块一样）。
梯形例子：
.tixing{
height: 0px;
width: 200px;
border-right: transparent 70px solid;
border-bottom: green 70px solid;
}
不懂得描述，写的乱七八糟，就酱吧~