双平行四边形箭头

<div class="stepArea">
  <div class="stepItem" @click="changeCurrent(0)">
    <div class="testShape" :class="current==0 ?'active':''">

    </div>
    <div class="testShape1" :class="current==0 ?'active':''">

    </div>
    <span :class="current==0 ?'active':''">填写问卷信息</span>
  </div>
  <div class="stepItem" @click="changeCurrent(1)">
    <div class="testShape" :class="current==1 ?'active':''">

    </div>
    <div class="testShape1" :class="current==1 ?'active':''">

    </div>
    <span :class="current==1 ?'active':''">设置问卷内容</span>
  </div>
</div>


-------------------

.stepArea{
  margin: 0 0 20px 20px;
  display: flex;
  .stepItem{
    position: relative;
    margin-right: 56px;
    .testShape{
      width:420px;
      height:20px;
      transform: skewX(30deg);
      text-align: center;
      line-height: 20px;
      border:1px solid #DCDEE0 ;
      border-bottom: none;
      &.active{
        background-color: @color-primary;
        border: none;
      }
    }
    .testShape1{
      width:420px;
      height:20px;
      transform: skewX(-30deg);
      text-align: center;
      line-height: 20px;
      border:1px solid #DCDEE0 ;
      border-top: none;
      &.active{
        background-color: @color-primary;
        border: none;
      }
    }
    span{
      position: absolute;
      left:50%;
      top:50%;
      font-size: 16px;
      transform:translate(-50%,-50%);
      &.active{
        color: #FFFFFF;
      }
    }
  }
}