斜切角 斜边

<div class="tab-basic">
	<el-tabs v-model="activeCaseName" class="tabs tabs-case-stage" tab-position="left">
  <el-tab-pane label="侦查" name="spyon" />
  <el-tab-pane label="起诉" name="prosecute" />
  <el-tab-pane label="审判" name="judge" />
  <el-tab-pane label="执行" name="carryout" />
</el-tabs>
</div>

.tab-basic{
    /deep/.el-tabs__item {
      /*color: #818181;*/
      color: #7ab5ff;
    }
    /deep/.el-tabs__item.is-active {
      /*color: #414141;*/
      background: #7ab5ff;
      color: #fff;
      border: 0;
    }
}
.tab-basic {
  display: flex;
  margin-top: 20px;
  .tabs{
    /*width: 300px;*/
    /deep/.el-tabs__item.is-left {
      text-align: center;
      margin-left: 0;
      width: 200px;
    }
  }
}  
/deep/.el-tabs__active-bar {
  display: none;
}
.tabs-case-stage{
  width: 400px;
  display: flex;
  justify-content: flex-end;
  /deep/.el-tabs__item{
    border: 1px solid #dcdfe6;
    margin-bottom: 8px;


    &:before{
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      left: -1px;
      top: 0;
      background:
        linear-gradient(-45deg, transparent 49.5%, #dcdfe6 49.5%, #dcdfe6 50.5%, transparent 50.5%);
    }
    &:after{
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      left: -1px;
      top: -1px;
      border: 5px solid #fff;
      border-bottom-color: transparent;
      border-right-color: transparent;
    }
    &.is-active:after{
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border: 5px solid #fff;
      border-bottom-color: transparent;
      border-right-color: transparent;
    }
  }
}