效果圖：
image.png
通常情況下可以用圖片做背景圖實(shí)現(xiàn)亩歹，但是，背景圖如果用png凡橱，會(huì)出現(xiàn)被拉伸變形的問題，如果用svg會(huì)有兼容問題亭姥，同時(shí)也有被拉伸變形的問題稼钩，仔細(xì)分析，這個(gè)圖標(biāo)其實(shí)是一個(gè)圓角矩形里面被兩個(gè)半圓切了左右兩邊达罗，可以根據(jù)大小不同修改其中的數(shù)字坝撑，還可以修改部分代碼用calc來實(shí)現(xiàn)自適應(yīng)：
html
<view class="small-coupon">
<text>優(yōu)惠券1</text>
</view>
css
.small-coupon {
display: inline-block;
font-size: 22rpx;
color: #F22A2A;
padding: 5rpx 20rpx;
margin-right: 8rpx;
border-radius: 8rpx;
border: 1rpx red solid;
position: relative;
&::before,&::after{
content: ' ';
display: block;
width: 9rpx;
height: 18rpx;
border: 1rpx solid red;
background-color: #fff;
position: absolute;
top: 10rpx;
}
&::before{
border-radius: 0 18rpx 18rpx 0;
border-left: none;
left: -1rpx;
}
&::after{
border-radius: 18rpx 0 0 18rpx;
border-right: none;
right: -1rpx;
}
}
代碼解析：
1、實(shí)現(xiàn)圓角矩形粮揉，這個(gè)很簡單
display: inline-block;
font-size: 22rpx;
color: #F22A2A;
padding: 5rpx 20rpx;
margin-right: 8rpx;
border-radius: 8rpx;
border: 1rpx red solid;
position: relative;
2巡李、實(shí)現(xiàn)兩個(gè)半圓，左右各一個(gè)：
&::before,&::after{
content: ' ';
display: block;
width: 9rpx;
height: 18rpx;
border: 1rpx solid red;
background-color: #fff; // 白色背景有用的
position: absolute;
top: 10rpx;
}
&::before{
border-radius: 0 18rpx 18rpx 0;
border-left: none;//
left: -1rpx; //-1位置遮住左邊框線
}
&::after{
border-radius: 18rpx 0 0 18rpx;
border-right: none;
right: -1rpx; //-1位置遮右住邊框線
}
