【CSS】纯css实现满减小卡条

目标

实现如下图的样式，要求：两边有凹槽，底部宽度随文字长度自适应。

以小程序为例：

<view class="item">
      <view class="item-text onepx">{{item.text}}</view>
      <view class="item-circle item-circle-left onepx"></view>
      <view class="item-circle item-circle-right onepx"></view>
</view>

.item {
    position: relative;
    overflow: hidden;
}

.item-text {
    height: 32rpx;
    line-height: 32rpx;
    font-size: 22rpx;
    font-weight: 400;
    color: #ee3333;
    background-color: #fef5f3;
    padding: 0 12rpx;
    z-index: 10;
}

.item-text:after {
    border: 1rpx solid #fed1ce;
    border-radius: 4rpx
}

.item-circle {
    width: 16rpx;
    height: 16rpx;
    content: '';
    background-color: #ffffff;
    box-sizing: border-box;
    position: absolute;
    top: 8rpx;
    z-index: 11;
}

.item-circle:after {
    border: 1px solid #fed1ce;
    border-radius: calc(4rpx * var(--dpr));
}

.item-circle-left {
    left: -10rpx;
}

.item-circle-right {
    right: -10rpx;
}

.onepx {
    position: relative;
}

.onepx::after {
    content: '';
    display: block;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
}

.onepx::after {
    width: calc(var(--dpr) * 100%);
    height: calc(var(--dpr) * 100%);
    transform: scale(calc(1 / var(--dpr)));
}

实现原理

1. 最外层用item包裹着，设置position:relative；
2. 然后做出方形item-text，即文字底部的矩形；
3. 左右两边添加带边框和圆角的小圆形circle，分别相对item定位在左右两边；
4. 最外层item加上overflow:hidden，把左右两边circle超出文字矩形的部分隐藏；