css怎么制作箭头

使用边框制作箭头

通过设置元素的边框宽度和颜色，将三个边框设为透明，一个边框显示为箭头样式。例如制作向右的箭头：

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #000;
}

调整 border-left 的宽度和颜色可改变箭头大小和颜色，其他方向同理。

使用伪元素和旋转

通过伪元素生成一个矩形，再通过 transform: rotate() 旋转成箭头形状：

.arrow {
  position: relative;
  width: 20px;
  height: 20px;
}
.arrow::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

调整 rotate 的角度（如 135deg 向左）可改变箭头方向。

使用 SVG 绘制箭头

通过内联 SVG 实现更灵活的箭头样式：

<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="M0 10 L20 0 L20 20 Z" fill="#000" />
</svg>

修改 path 的 d 属性可调整箭头形状和方向，CSS 中通过 fill 控制颜色。

使用 CSS 渐变

通过 linear-gradient 背景渐变生成斜线箭头效果：

.arrow-gradient {
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom right, transparent 45%, #000 45%, #000 55%, transparent 55%);
}

调整渐变角度（如 to top right）可改变箭头指向。

使用 Unicode 符号

直接使用 Unicode 箭头字符（需设置字体支持）：

.arrow-symbol {
  font-size: 24px;
  line-height: 1;
}

HTML 中插入符号如 →（向右）、↑（向上）。