css实现梯形tab切换

 <view class="tabs">
   <view
      class="tabs_item"
      v-for="(item, index) in tabList"
      :key="item.id"
      :class="{ active: index == checkNum }"
      @click="checkNum = index"
    >
      {{ item.name }}
    </view>
  </view>

const tabList = ref([
  {
    id: 1,
    name: '认证车辆',
  },
  {
    id: 2,
    name: '临时加车',
  },
])
const checkNum = ref(1)

.tabs {
  display: flex;
  width: 100%;
  gap: 20px;
  height: 40px;
  background-color: #f0f4f8;
  .tabs_item {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    position: relative;
    &.active {
      color: #f0f4f8;
    }
    &:first-child {
      &.active {
        background-color: blue;
        &:after {
          content: '';
          position: absolute;
          right: -18px;
          top: 0;
          border-top: 0 solid transparent;
          border-right: 18px solid transparent;
          border-left: 0 solid transparent;
          border-bottom: 40px solid blue;
        }
      }
    }
    &:last-child {
      &.active {
        background-color: blue;
        &:before {
          content: '';
          position: absolute;
          left: -18px;
          top: 0;
          border-right: 0 solid transparent;
          border-left: 18px solid transparent;
          border-bottom: 0 solid transparent;
          border-top: 40px solid blue;
        }
      }
    }
  }
}