直接上最终效果

基本页面结构

      <div class="tab-list">
        <div
          v-for="tab in tabList"
          :key="tab.id"
          class="tab-item"
          :class="activeTab === tab.id ? 'tab-selected' : ''"
          @click="onTab(tab.id)"
        >
          <image :src="tab.icon" class="tab-icon" />
          <div>{{ tab.label }}</div>
        </div>
      </div>

  $tab-height: 52px;
  $tab-bgcolor: #e2e8f8
  
  .tab-list {
    display: flex;
    border-radius: 12px 12px 0 0;
    background-color: $tab-bgcolor;

    .tab-item {
      flex: 1;
      height: $tab-height;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      opacity: 0.65;
      color: $primary-color;
      font-weight: 600;
      position: relative;
    }
    
    .tab-icon {
      width: 17px;
      height: 17px;
      margin-right: 4px;
    }
    
    .tab-selected {
      opacity: 1;
      background: #ffffff;
    }

  }

添加上半两个圆角

这个很简单

    .tab-selected {
      opacity: 1;
      background: #ffffff;
      // 新增
      border-radius: 12px 12px 0 0;
    }

添加下半两个反圆角

加两个辅助的伪元素

    .tab-selected::before {
      content: '';
      position: absolute;
      left: -12px;
      bottom: 0;
      width: 12px;
      height: $tab-height;
      background: red;
      border-radius: 0 0 12px 0;
    }
    .tab-selected::after {
      content: '';
      position: absolute;
      right: -12px;
      bottom: 0;
      width: 12px;
      height: $tab-height;
      background: red;
      border-radius: 0 0 0 12px;
    }

再添加box-shadow

    .tab-selected {
      opacity: 1;
      background: #ffffff;
      border-radius: 12px 12px 0 0;
      // 新装置
      box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;
    }

到这个就差不多可以收尾了，把伪元素的背景色改为tabs的背景色

    .tab-selected::before {
      content: '';
      position: absolute;
      left: -12px;
      bottom: 0;
      width: 12px;
      height: $tab-height;
      background: #e2e8f8;  // 修改
      border-radius: 0 0 12px 0;
    }
    .tab-selected::after {
      content: '';
      position: absolute;
      right: -12px;
      bottom: 0;
      width: 12px;
      height: $tab-height;
      background: #e2e8f8; // 修改
      border-radius: 0 0 0 12px;
    }

再处理下box-shadow

    .tab-selected {
      opacity: 1;
      background: #ffffff;
      border-radius: 12px 12px 0 0;
      // box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;
      box-shadow: 12px 12px 0 0 #ffffff, -12px 12px 0 0 #ffffff;
    }

完美

但是两边的还会有问题

父级元素overflow:hidden即可

.tab-list {
    display: flex;
    position: relative;
    z-index: 2;
    border-radius: 12px 12px 0 0;
    background-color: #e2e8f8;
    overflow: hidden; // 新增
 }