本文摘自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中的id选择器与class选择器的介绍
css怎么去掉a的下划线
css可以做什么
用记事本怎么写css
css textarea 不可拖动如何实现
css 修改后 不更新怎么办
css如何增加下划线
css如何实现文本多行省略号
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用css来画出各种样式不同的梯形