两侧直角梯形 中间平行四边形 布局 css

<view class="bg-white nav">
		<view class="flex text-center paddings">
			<view
				class="flex-sub threeItem"
				:class="index == TabCur ? 'text-blue text-lg threeItem_cur text-bold' : 'text-black'"
				v-for="(item, index) in tabList"
				:key="index"
				@tap="tabSelect"
				:data-id="index"
			>
				<view class="btnName">{{ item }}</view>
			</view>
		</view>
</view>

.nav {
		.paddings {
			padding: 0 17rpx;
		}
        //按钮
	    .threeItem {
		    /* 移除固定宽度，让元素自适应 */
		    /* height: 保持原有高度 */
		    background-color: #4078d9;
		    /* 添加flex-grow属性，使元素在空间允许的情况下扩展 */
		    flex-grow: 1;
		    /* 添加margin，保持元素间的间距一致 */
		    margin: 0 -16rpx;
		    text-align: center;
		    line-height: 76rpx;
		    height: 80rpx;
		    font-size: 28rpx;
		    color: #a5d8ff;
		    font-weight: 400;
		    position: relative;
		    z-index: 5;
    
		    &:nth-child(1) {
		    	// 在此处添加样式
		    	clip-path: polygon(0 0, 84% 0, 99% 100%, 0 100%);
		    }

		    // 选择 .threeItem 类下的第二个子元素
		    &:nth-child(2) {
		    	// 在此处添加样式
		    	clip-path: polygon(0% 0%, 84% 0, 100% 100%, 15% 100%);
		    	margin: 0 -26rpx;
		    }

		    // 选择 .threeItem 类下的第三个子元素
		    &:nth-child(3) {
		    	// 在此处添加样式
		    	clip-path: polygon(0 0%, 100% 0, 100% 100%, 16% 100%);
		    }
	    }
	    .threeItem_cur {
		    color: #333333;
		    background: #fff;
		    // transform: scaleY(1.2);
	    	position: relative;
		    font-size: 34rpx;

		    &::after {
		    	content: '';
		    	width: 27%;
		    	height: 8rpx;
		    	background: #bde3ff;
		    	position: absolute;
		    	bottom: 22rpx;
		    	left: 36%;
			    z-index: -1;
		    }
	    }
	}