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;
}