最近公司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;
}
}