倒直角梯形
.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; }
来源:https://www.cnblogs.com/hyql/p/4876933.html