css 类似.9图

.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>