先看效果图 没加圆角的侧边栏 加了圆角的侧边栏(好看多了) 实现步骤 步骤一先给每个选项卡右上角和右下角添加正方形div <view class="tabs-item" :class="[{'tabs-active': index === selectIndex}]"> <view :class="[{'corner top-corner': index === selectIndex}]"></view> <view :class="[{'corner bottom-corner': index === selectIndex}]"></view> </view> .corner { width: 24rpx; height: 24rpx; position: absolute; background: #fff; } .bottom-corner { position: absolute; top: 100%; right: 0; z-index: 1; } .top-corner { position: absolute; bottom: 100%; right: 0; } 步骤二给每个选中的选项卡添加 :before和:after就是最终效果 .tabs-active:before { top: -24rpx; border-bottom-right-radius: 100%; } .tabs-active:after, .tabs-active:before { content: ' '; position: absolute; background: #f6f7fa; width: 24rpx; height: 24rpx; right: 0; z-index: 2; } .tabs-active:after { bottom: -24rpx; border-top-right-radius: 100%; }