本文摘自PHP中文网,作者V,侵删。

首先我们要知道一下四个非常重要的样式:
(学习视频分享:css视频教程)
border-buttom:设置下边框
border-top:
border-left:
border-right:
1 2 3 4 5 6 7 | .mask
{
height: 0;
width: 100px;
border-top: 100px solid red;
border-right: 37px solid transparent;
}
|

1 2 3 4 5 6 7 8 | .mask
{
width:100px;
height:0;
border-width:0 37px 100px 37px;
border-style:none solid solid;
border-color:transparent transparent red;
}
|

1 2 3 4 5 6 7 8 | .mask
{
width:100px;
height:0;
border-top: 100px solid red;
border-right: 37px solid transparent;
border-left:37px solid transparent;
}
|

1 2 3 4 5 6 7 | .mask
{
width:100px;
height:0;
border-top:100px solid red;
border-left:37px solid transparent;
}
|

阅读剩余部分
相关阅读 >>
css怎么设置斜体样式
怎样用css实现无缝轮播图切换?
css如何设置内边距
css page-break-inside属性怎么用
css bulma框架是什么
:nth-child(n)的作用是什么
css操作控件实现disable效果
css如何实现滑动门效果
css框模型概念介绍
css如何让div成圆的
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用css来画出各种样式不同的梯形