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

 

<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>