css实现梯形

梯形绘制思路：拆分成三角形和矩形，三角形通过border实现，矩形通过图形的heigth和width实现。

上图中梯形分割成三角形和矩形

1）完成三角形

由于三角形实现方法是：矩形四边中，三边继承父亲颜色，一边其他颜色，因此我们为三角形添加外边拼接成矩形（图中黑色矩形）。

代码写法：

html:

<div></div>

css:

div{

width:0px;

height:0px;

border-left:40px solid transparent;

border-top:20px solid #AAF;

border-bottom:20px solid transparent;

border-right:0px;

}

2)实现矩形

根据分割的梯形中，矩形在三角形右边，因此设置width:40px; height:0px;

代码写法：

html:

<div></div>

css:

div{

width:40px;

height:0px;

border-left:40px solid transparent;

border-top:20px solid #AAF;

border-bottom:20px solid transparent;

border-right:0px;

}