好看的侧边栏选项卡圆角css

先看效果图

没加圆角的侧边栏

加了圆角的侧边栏（好看多了）

实现步骤

步骤一先给每个选项卡右上角和右下角添加正方形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%;
			}