css如何用span画一个想左的小三角形当方向键

在CSS中，你可以使用伪元素 `:before` 和 `:after` 来创建一个简单的箭头形状，像方向键一样。对于一个小三角形，我们可以借助 `border` 属性来实现。假设你想创建一个向左的三角形，可以这样做：

HTML:

<span class="direction-key left"></span>

CSS:

.direction-key {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 5px; /* 控制间距 */
}

.left {
  border-style: solid;
  border-width: 5px 5px 0 5px; /* 上、下、左、右四个边的宽度 */
  border-color: transparent transparent #000 transparent; /* 设置颜色，#000代表黑色，也可以换成你喜欢的颜色 */
}

/* 可选，给小三角形添加圆角使其更柔和 */
.direction-key.left::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000;
  border-radius: 2px; /* 自定义圆角值 */
}

这个CSS样式会生成一个小的向左三角形。如果需要其他方向的箭头，只需调整 `border-width` 和 `border-color` 的值即可。