奇怪的异形选项卡样式、弧形边框选项卡

 

<template><div :class="$options.name"><div class="tab">默认选项卡</div><div class="tab" active>选中选项卡</div><el-divider /><el-tabs v-model="tabActiveName" @tab-click="(tab, event) => {}" type=""><el-tab-pane:label="tab.label":name="tab.value.toString()"v-for="(tab, index) in tabs":key="index":disabled="tab.disabled"><span slot="label"><el-badge:value="(tab.badge || {}).value":max="99":type="(tab.badge || {}).type || `danger`":hidden="!tab.badge">{{ tab.label }}</el-badge></span></el-tab-pane></el-tabs></div>
</template>
<script>
export default {name: "demo",data() {return {tabs: [{ value: 1, label: "显示文本1" },{ value: 2, label: "显示文本2" },{ value: 3, label: "显示文本3" },],tabActiveName: "1", //name必须是String类型，否者tab默认样式聚焦状态下不会显示下划线};},
};
</script>
<style lang="scss" scoped>
.demo {>>> .el-tabs__active-bar {display: none;}>>> .el-tabs__item,.tab {// transform: perspective(30px) rotateX(20deg);//3D立体效果$backgroundColor: #bedeff;$backgroundColorAcitve: #409eff;$cornerWidth: 15px;$cornerHeight: 15px;$tabHeight: 40px;// ----------------------------------------box-sizing: border-box;padding: 0 20px !important;width: max-content;height: $tabHeight;background-color: $backgroundColor;border-radius: $cornerWidth $cornerWidth 0 0;position: relative;transform-origin: center bottom;display: inline-flex;justify-content: center;align-items: center;color: $backgroundColorAcitve;@mixin leftBg($backgroundColor: $backgroundColorAcitve) {background: radial-gradient(circle at 0 0,transparent $cornerWidth,$backgroundColor $cornerWidth);}@mixin rightBg($backgroundColor: $backgroundColorAcitve) {background: radial-gradient(circle at 100% 0,transparent $cornerWidth,$backgroundColor $cornerWidth);}&::before,&::after {content: "";position: absolute;width: $cornerWidth;height: $cornerWidth;bottom: 0;}&::before {left: -$cornerWidth;@include leftBg($backgroundColor);}&::after {right: -$cornerWidth;@include rightBg($backgroundColor);}&[active],&.active,&.is-active {z-index: 1;$backgroundColor: $backgroundColorAcitve;color: white;background-color: $backgroundColor;&::before {@include leftBg($backgroundColor);}&::after {@include rightBg($backgroundColor);}}}
}
</style>