tab选项卡，反圆角样式

<template>
  <div class="container">
    <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)"
      >
        <div>{{ tab.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('1')
const tabList = ref([
  { id: '1', label: '对话' },
  { id: '2', label: '对话1' },
  { id: '3', label: '对话2' },
  { id: '4', label: '对话1' },
  { id: '5', label: '对话2' },
  { id: '6', label: '对话1' },
  { id: '7', label: '对话2' }
])

const onTab = (id) => {
  activeTab.value = id
}
</script>

<style scoped lang="scss">
$tab-height: 52px;
$primary-color: #fff;
$tab-bgcolor: #243451;

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

.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: #121821;
    // 新增
    border-radius: 12px 12px 0 0;
    // 新装置
    // box-shadow: 12px 12px 0 0 blue, -12px 12px 0 0 blue;
    box-shadow:
      12px 12px 0 0 #121821,
      -12px 12px 0 0 #121821;
    border-top: 0.5px solid #859bbf;
    border-bottom: 0.5px solid #121821;
    margin-right: 8px;
    margin-left: -2px;
  }

  .tab-selected::before {
    content: '';
    position: absolute;
    left: -12px;
    bottom: 0;
    width: 12px;
    height: 44px;
    background: #243451; // 修改
    border-radius: 0 0 12px 0;
    border-right: 0.5px solid #859bbf;
  }

  .tab-selected::after {
    content: '';
    position: absolute;
    right: -12px;
    bottom: 0;
    width: 12px;
    height: 44px;
    background: #243451; // 修改
    border-radius: 0 0 0 12px;
    border-left: 0.5px solid #859bbf;
  }
}
</style>

 

1. 伪元素装饰：

   • .tab-selected::before 和 .tab-selected::after 是伪元素，它们在激活标签页的左右两侧各添加了一个装饰性的三角形效果。
   • 这些伪元素通过设置position: absolute;定位在激活标签页的底部左右两侧，通过width、height、background和border属性形成了三角形的外观。
   • border-radius和border属性进一步细化了三角形的边缘，使其与整体设计协调。

实际效果：