CSS 实现梯形tabs切换

实现这种tab切换

<div class="tabs">
      <div class="tabs_item" v-for="it in 2" :key="it" :class="{active:it==checkNum}" @click="checkNum = it">
        {{it}}
      </div>
    </div>

  checkNum:1,

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

即可实现这种样式