CSS画箭头

向右示例

.arrows {
  height: 7px;
  width: 7px;
  background-color: transparent;
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  border-right: 2px solid rgba(0, 0, 0, 0.3);
  transform: rotate(45deg);
  margin-left: 6px;
}

可以尝试将其封装为组件（以微信小程序为例）

<!-- 向右 -->
<view class="arrows" style="width: {{size}}; height: {{size}}; border-top: 2px solid {{color}}; border-right: 2px solid {{color}}; margin-left: 6px;" wx:if="{{right}}"></view>

<!-- 向左 -->
<view class="arrows" style="width: {{size}}; height: {{size}}; border-left: 2px solid {{color}}; border-bottom: 2px solid {{color}}; margin-right: 6px;" wx:if="{{left}}"></view>

<!-- 向上 -->
<view class="arrows" style="width: {{size}}; height: {{size}}; border-left: 2px solid {{color}}; border-top: 2px solid {{color}}; margin-right: 6px;" wx:if="{{top}}"></view>

<!-- 向下 -->
<view class="arrows" style="width: {{size}}; height: {{size}}; border-right: 2px solid {{color}}; border-bottom: 2px solid {{color}}; margin-right: 6px;" wx:if="{{bottom}}"></view>

其中size、color、方向由参数传递

properties: {
    size: {
      type: String,
      value: "7px"
    },
    direction: {
      type: String,
      value: "right"
    },
    color: {
      type: String,
      value: "rgba(0,0,0,0.3)"
    }
  },

使用：

<arrows direction="right" size="10px"></arrows>
    <arrows direction="left" color="red"></arrows>
    <arrows direction="top" color="#34ff55"></arrows>
    <arrows direction="bottom" color="rgba(0,0,0,0.6)"></arrows>

效果：

不同前端可能封装过程不一样，可以自行确定