实现tabs圆角及反圆角效果

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

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

.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;
}

.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;
}

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