效果预览：

长、宽、粗细等等根据情况合理调整即可。

组件：

<template>
    <div class="line" :style="props.arrowsColor"></div>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue';
 
const props = defineProps({
    arrowsColor: Object
});

onMounted(()=> {
    // console.log(props.arrowsColor);
})
</script>

<style lang="scss" scoped>
.line{
    position: relative;
    width: 70%;
    height: 10px;
    background-color: var(--color);
    
}
.line:after {
    content: "";
    position: absolute;
    right: -18px;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 12px solid var(--color);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid transparent;
    
}
</style>

使用方法：

<template>
    <div style="width: 200px; height: 40px; display: flex; align-items: center;">
        <Arrows :arrowsColor=" true? bgColorGreen : bgColorGray " />
    </div>
    <div style="width: 200px; height: 40px; display: flex; align-items: center;">
        <Arrows :arrowsColor=" false? bgColorGreen : bgColorGray " />
    </div>
</template>

<script setup>
  import Arrows from '@/components/arrows/Arrows.vue';

  const bgColorGray = {"--color": "#D3D3D3"};
  const bgColorGreen = {"--color": "#43CD80"};

</script>

<style lang="scss" scoped>
</style>