用CSS绘制梯形

半城伤御伤魂 提交于 2020-03-25 08:41:26

倒直角梯形  

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



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!