vue3步骤条带边框点击切换高亮

如果是div使用clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%);进行裁剪加边框没实现成功。目前这个使用svg完成带边框的。
形状可自行更改path 标签里的 :d=“[num != 1 ? ‘M 0 0 L 160 0 L 176 18 L 160 38 L 0 38 L 15.5 18 Z’ : ‘M 0,0 L 160,0 L 176,18 L 160,38 L 0,38 Z’]”

<!-- 进度条 -->
<template>
  <div class="stepsBox">
    <div class="stepsContent">
        <svg width="176" height="38" viewBox="0 0 176 38"  v-for="num in stepsDesc.length" :key="num" @click="onChange(num)">
                <path  :d="[num != 1 ? 'M 0 0 L 160 0 L 176 18 L 160 38 L 0 38 L 15.5 18 Z' : 'M 0,0 L 160,0 L 176,18 L 160,38 L 0,38 Z']" 
                        :fill="[letIndex == num ? '#AC8757' : '#fff' ]" :stroke="[letIndex == num ? '#AC8757' : nowIndex  == num ? '#AC8757' : '#999' ]" stroke-width="1"/>
                <text  x="50" y="24" font-family="Arial" font-size="14" :fill="[ nowIndex  == num && letIndex != num ? '#AC8757' : letIndex == num ? '#fff' : '#666' ]">③投资咨询</text>
        </svg>
    </div>


  </div>
</template>
<script setup>
import {
    reactive,
    ref
  } from 'vue'
const props = defineProps({
  stepsDesc: {
    type: [Array, Object]
  }
});
const letIndex = ref(2)
const nowIndex = ref(1) //代表当前进行那个步骤，进行边框文字颜色的改变
const onChange = (index) => {
        letIndex.value = index
    }
</script>


<style lang="scss" scoped>
.stepsBox {
    margin: 15px auto;
    height: 60px;
    position: relative;
    .stepsContent {
        display: flex;
        padding: 0 30px;
        align-items: center;
        
    }
}
</style>