css 类似.9图

.9图原理:三部分:左右各一部分,中间内容区随内容自动伸缩

1、h5

css 类似.9图_第1张图片

.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;}
111

 

2、PC端

css 类似.9图_第2张图片

中间部分随内容宽度自动伸缩

.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("");}
.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("");}
随内容自动伸缩

 

你可能感兴趣的:(前端)