小程序中纯CSS实现仿京东小优惠券图标

效果图：

image.png

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

html

<view class="small-coupon">
    <text>优惠券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、实现圆角矩形，这个很简单

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