本文摘自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如何改变svg颜色
css如何设置背景
css中词语间隔怎么设置
css 怎么设置透明度渐变
css怎么设置边框线样式
css hack是什么意思
css怎么给文字加边框
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 利用css来画出各种样式不同的梯形