效果预览：

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

组件：

<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>