纯css 实现不规则领券标签

最近公司ui出了个需求，要实现一个不规则领券标签，如下图：

想了好几个思路都有一些缺点

1、用border-image, 浏览器有最小字体限制，如果设计图小于最小字体，可能拉伸图片，造成两侧有一些拉伸变形，切四角有弧度，转角处看着有点不正常。

2、把两端独立切图，再合中间拼接，中间部分用border, 这种如果移动端需要做1px，应该图片和border粗细会对不上。

3、整个当成一个规则的长方形，把两个小圆单独用css写，再用定位覆盖到两端，这种没什么缺点，采用这种方法。

以下是代码

<span className="tag">领券满100减50</span>

.tag {padding: 0.53vw 1.07vw;height: 3.73vw;line-height: 3.73vw;font-size: 2.67vw;color: #FE6602;border: 1px solid #FF751E;position: relative;&::before,&::after {content: '';display: block;width: 2px;height: 4px;background-color: white;border-bottom-color: wthie;position: absolute;top: 50%;transform: translateY(-50%);}&::before {border-radius:0 4px 4px 0;left: -1px;border-top: 1px solid #FF751E;border-right: 1px solid #FF751E;border-bottom: 1px solid #FF751E;}&::after {border-radius:4px 0 0 4px;right: -1px;border-top: 1px solid #FF751E;border-left: 1px solid #FF751E;border-bottom: 1px solid #FF751E;}
}