记录一下tab梯形圆角的开发解决方案

实现这种样式：

直接写代码，具体原理可参考作者的博客：
https://juejin.cn/post/7230737419842633788

<div class="tabContent"><div:class="['tab-item',current === index ? 'tab-selected' : 'not-selected',]"v-for="(item, index) in list":key="item.name"@click="selectTab(index)">{{ item.name }}</div>
</div>current: 0,
list: [{name: "积分明细",},{name: "积分获取",},{name: "积分使用",},
],.tabContent {display: flex;position: relative;z-index: 2;border-radius: 12px 12px 0 0;background-color: #6bb93e;overflow: hidden; // 重点.tab-item {flex: 1;height: 90upx;display: flex;justify-content: center;align-items: center;font-size: 28upx;// opacity: 0.65;   // 暂时删除，不选中样式需要重新编写color: #fff;font-weight: 600;position: relative;}.tab-selected {opacity: 1;background: #ffffff;color: black;border-radius: 12px 12px 0 0;box-shadow: 24px 33px 0 #fff, -24px 33px 0 0 #fff; // 重点}.tab-selected::before {content: "";position: absolute;left: -6px;bottom: 0;width: 12px;height: 90upx;border-top-left-radius: 12px;background-color: #fff;transform: skewX(-15deg); // 重点}.tab-selected::after {content: "";position: absolute;right: -6px;bottom: 0;width: 12px;height: 90upx;border-top-right-radius: 12px;background-color: #fff;transform: skewX(15deg); // 重点}.not-selected::before {content: "";position: absolute;left: 6px;bottom: 0;width: 12px;height: 52px;background: #6bb93e;border-bottom-left-radius: 12px;transform: skewX(15deg); // 重点}.not-selected::after {content: "";position: absolute;right: 6px;bottom: 0;width: 12px;height: 52px;background: #6bb93e;border-bottom-right-radius: 12px;transform: skewX(-15deg); // 重点z-index: 1;}}