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才得以实现

下载链接:http://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

巴特西

css3实现梯形三角

最新文章

热门文章