效果圖：

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è)很簡(jiǎn)單

               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位置遮右住邊框線
        }