目标
实现如下图的样式，要求：两边有凹槽，底部宽度随文字长度自适应。
以小程序为例：
<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)));
}
复制代码实现原理
- 最外层用item包裹着，设置position:relative；
- 然后做出方形item-text，即文字底部的矩形；
- 左右两边添加带边框和圆角的小圆形circle，分别相对item定位在左右两边；
- 最外层item加上overflow:hidden，把左右两边circle超出文字矩形的部分隐藏；
