css3实现梯形三角

最新推荐文章于 2022-08-25 10:54:05 发布

weixin_30627341

最新推荐文章于 2022-08-25 10:54:05 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/leshao/p/5674720.html

版权

近期移动端项目中，图片很多
移动端尽量少图片，以便提升加载速度！这时候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;
}