css3实现梯形三角
近期移动端项目中,图片很多
移动端尽量少图片,以便提升加载速度!这时候css3可以大放光芒
比如梯形的背景图
---------------------------------
-----------------------------------------------
2个标签即可实现梯形背景
----------------html----------------------
<div class="box">
<span>标题</span>
</div>
-----------------css------------------------
.box {
border-bottom: 1px solid orange;
margin-bottom: 100px;
}
.box span {
display: inline-block;
padding: 10px 20px;
background: orange;
color: #fff;
width: 20%;
position: relative;
}
.box span:after{
content: '';
display: inline-block;
width: 30px;
position: absolute;
top: 0;
bottom: 0;
-webkit-transform: skew(30deg);
transform: skew(30deg);
background: orange;
right: -15px;
}
多谢@大漠 ,@lxzhi @一万等专家指点,css3才得以实现
下载链接:https://files.cnblogs.com/files/leshao/css3%E5%AE%9E%E7%8E%B0%E6%A2%AF%E5%BD%A2%E4%B8%89%E8%A7%92.rar