.9图原理:三部分:左右各一部分,中间内容区随内容自动伸缩
1、h5
.package-num{height: .4rem;line-height: .4rem;min-width: .4rem;text-align: center;padding: 0 .1rem;font-size: .28rem;color: #fff;border-radius: .2rem;background-color: #ff3d34;}
<span class="package-num">111</span>
2、PC端
中间部分随内容宽度自动伸缩
.tip-auto-con{display: -webkit-box;display: -webkit-flex;display: flex;height: 57px}
.tip-auto-con>*{display: block;height: 100%;}
.bg-border{background-repeat: no-repeat;width: 34px;background-image: url("<?php echo base_url('static/template/img/honor/tips.png')?>");}
.left-border{background-position: 0 0;}
.right-border{background-position: -141px 0;}
.tip-auto-con>span{line-height: 57px;background-position: center;background-repeat: repeat;background-image: url("<?php echo base_url('static/template/img/honor/tips_middle.png')?>");}
<div class="tip-auto-con">
<i class="bg-border left-border"></i>
<span>随内容自动伸缩</span>
<i class="bg-border right-border"></i>
</div>