纯css 实现不规则领券标签

这篇博客探讨了如何使用CSS来创建一个不规则的领券标签,针对三种不同的实现思路进行了分析,包括border-image、两端独立切图拼接以及通过定位覆盖小圆的方法。最终选择了第三种方法,因为它避免了潜在的图像拉伸和对齐问题。代码示例展示了如何利用伪元素和定位来创建这种标签效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值