vue+css漂亮的导航栏

最终样式预览
html

    <div class="nav_box">
      <div :class="[isActive>=1?'in in_on':'in in_off']" @click="choose_tab(1)">
        基本信息
      </div>
      <div :class="[isActive>=2?'in in_on':'in in_off']" @click="choose_tab(2)" style="padding-left:18px;">客户声明
        <div :class="[isActive>=1?'in_cot in_on':'in_cot in_off']"></div>
      </div>
      <div :class="[isActive>=3?'in in_on':'in in_off']" @click="choose_tab(3)" style="padding-left:18px;">风险评估
        <div :class="[isActive>=2?'in_cot in_on':'in_cot in_off']"></div>
      </div>
      <div :class="[isActive>=4?'in in_on':'in in_off']" @click="choose_tab(4)" style="padding-left:18px;">上传文件
        <div :class="[isActive>=3?'in_cot in_on':'in_cot in_off']"></div>
      </div>
      <div :class="[isActive>=5?'in in_on':'in in_off']" @click="choose_tab(5)" style="padding-left:18px;">预约开户
        <div :class="[isActive>=4?'in_cot in_on':'in_cot in_off']"></div>
      </div>
    </div>

css

  .nav_box {
    width: 64%;
    min-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 36px;
    border-radius: 36px;
    position: relative;

    .in {
      width: calc(20%);
      height: 36px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      cursor: pointer;
    }

    .in_on {
      background: #25b0b6;
    }

    .in_off {
      background: #c8c8c8;
    }

    .in_cot {
      position: absolute;
      width: 36px;
      height: 36px;
      border-top: 3px solid white;
      border-right: 3px solid white;
      transform: rotate(45deg);
      left: -18px;
      top: 0;
      z-index: 2;
    }


  }

控制切换

choose_tab(index) {
        this.isActive = index
      },