用CSS绘制梯形

时间：2015-10-14 12:34:45 收藏：0 阅读：3534

倒直角梯形　　

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

效果如下：

技术分享

等腰梯形

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

效果如下：

技术分享

倒等腰梯形

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

效果如下：

技术分享

倒直角梯形2

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

技术分享