附上一篇文章：梯形tab按钮-基于clip-path path函数实现 - JSRUN.NET

他这个区别在于，收尾两侧都是直角的，如图

下面这个是圆角：

思路：

代码如下：

<template><div class="wrap"><div class="tabs"><div v-for="index in 3" :key="index" class="box"><div class="tab" :class="{ active: activeIndex == index }" @click="onTabClick(index)">{{ '标签' + index }}</div></div></div><div class="content-wrap"></div></div>
</template>
<script>
export default {data() {return {activeIndex: -1,tabList: [{ id: 1, label: '数据真短' },{ id: 21, label: '数据报告' },{ id: 31, label: '数据展示' }]};},methods: {onTabClick(val) {this.activeIndex = val;}}
};
</script><style lang="scss">
.wrap {background-color: #eee;width: 620px;margin: 0 auto;padding: 10px;box-sizing: border-box;
}.tabs {display: flex;width: 100%;overflow: hidden;border-radius: 8px 8px 0 0;background: linear-gradient(#cdd9fe, #e2e9fd);.box {width: 200px;height: 50px;}
}.tab {width: 100px;height: 50px;margin: 0 auto;cursor: pointer;position: relative;text-align: center;line-height: 50px;
}.tab.active {background-color: #fff;color: #4185ef;
}.tab.active:before {content: '';position: absolute;top: 0;left: -50px;height: 100%;width: 50px;z-index: 2;background-color: #fff;clip-path: path('M 50,0 C 25,0 25,50 0,50 L 50,50 Z');
}.tab.active:after {content: '';position: absolute;top: 0;right: -50px;height: 100%;width: 50px;z-index: 2;background-color: #fff;clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z');
}.content-wrap {min-height: 200px;background-color: #fff;
}
</style>

最后：附上一个CSS实现的另一种方法

实现梯形圆角tab - 掘金