完成后的效果

• 首先是画一个矩形, 再通过 伪 after 和 before 给两边画上三角形拼接上就 好啦, 话不多说, 直接贴代码!

<template>
  <div class="family-info-edit-reconsitution">
    <div class="household-details-form">
      <ul class="form-progress-ul">
        <template v-for="item in 8">
          <li :key="item" :class="['form-progress-li', activeForm == item ? 'form-progress-li-active' : '']" @click="handelCurrentForm(item)">
            <span>步骤{{item}}</span>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeForm: ''
    };
  },
  methods: {
    handelCurrentForm(val) {
      this.activeForm = val;
    }
  }
};
</script>
<style lang="less" scoped>
.family-info-edit-reconsitution{
  min-width: 1100px;
  .household-details-form{
    .form-progress-ul{
      .form-progress-li{
        cursor: pointer;
        width: 120px;
        line-height: 50px;
        background: #b5b5b5;
        display: inline-block;
        color:#fff;
        position: relative;
        margin-right: 10px;
        text-align: center;
        border-radius: 2px;
      }
      .form-progress-li:after{
        content: '';
        display: block;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid #b5b5b5;
        position: absolute;
        right: -19px;
        top: 0;
        Z-index: 10;
      }
      .form-progress-li:before{
        content: '';
        display: block;
        border-top: 25px solid #b5b5b5;
        border-bottom: 25px solid #b5b5b5;
        border-left: 20px solid #ffffff;
        position: absolute;
        left: 0px;
        top: 0;
      }
      // 隐藏第一个元素的 before 样式
      .form-progress-li:first-child:before{
        display: none;
      }
      .form-progress-li{
        span{
          margin-left: 20px;
        }
      }
      .form-progress-li:first-child{
        span{
          margin-left: 0;
        }
      }
      // 选中颜色
      .form-progress-li-active{
        background-color: #29d095;
      }
      .form-progress-li-active:after{
        border-left-color: #29d095;
      }
      .form-progress-li-active:before{
        border-left-color: #ffffff;
        border-top: 25px solid #29d095;
        border-bottom: 25px solid #29d095;
      }
    }
  }
}
</style>