效果图：

image.png

通常情况下可以用图片做背景图实现，但是，背景图如果用png，会出现被拉伸变形的问题，如果用svg会有兼容问题，同时也有被拉伸变形的问题，仔细分析，这个图标其实是一个圆角矩形里面被两个半圆切了左右两边，
代码实现，可以根据大小不同修改其中的数字，还可以修改部分代码用calc来实现自适应：

.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、实现圆角矩形，这个很简单

display: inline-block;font-size: 22rpx;color: #F22A2A;padding: 5rpx 20rpx;margin-right: 8rpx;border-radius: 8rpx;border: 1rpx red solid;position: relative;

2、实现两个半圆，左右各一个：

&::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位置遮右住边框线}