效果图:
![](http://upload-images.jianshu.io/upload_images/16812888-2f45666e3e3b4edf.png)
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位置遮右住边框线
}