用CSS绘制梯形

倒直角梯形　　

.mask1
{
    height: 0;
     100px;
    border-top: 100px solid red;
    border-right: 37px solid transparent;
}

效果如下：

等腰梯形

.mask2
{
    100px;
    height:0;
    border-0 37px 100px 37px;
    border-style:none solid solid;
    border-color:transparent transparent red;
}

效果如下：

倒等腰梯形

.mask3
{
100px;
height:0;
border-top: 100px solid red;
border-right: 37px solid transparent;
border-left:37px solid transparent;
}

效果如下：

倒直角梯形2

.mask4
{
100px;
height:0;
border-top:100px solid red;
border-left:37px solid transparent;
}