css 制作箭头

使用 CSS 边框制作箭头

通过调整元素的边框宽度和颜色，利用透明边框可以创建简单的箭头效果。以下是一个向右箭头的示例：

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

调整 border-left 的宽度和颜色可以改变箭头大小和颜色，border-top 和 border-bottom 控制箭头高度。

使用伪元素和旋转制作箭头

通过伪元素和 transform: rotate() 可以实现更灵活的箭头设计：

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

调整 width、height 和 rotate 角度可以改变箭头方向和大小。

使用 SVG 内联制作箭头

SVG 提供更精确的箭头控制，适合复杂设计：

<div class="svg-arrow">
  <svg viewBox="0 0 20 20" width="20" height="20">
    <path d="M0 10 L20 10 M15 5 L20 10 L15 15" stroke="#000" fill="none"/>
  </svg>
</div>

通过修改 path 的 d 属性可以调整箭头形状和方向。

使用 CSS clip-path 制作箭头

clip-path 属性可以创建多边形裁剪区域：

.clip-arrow {
  width: 100px;
  height: 40px;
  background: #000;
  clip-path: polygon(
    0% 20%,
    60% 20%,
    60% 0%,
    100% 50%,
    60% 100%,
    60% 80%,
    0% 80%
  );
}

调整 polygon 的坐标点可以改变箭头形状和指向。

使用 Unicode 字符作为箭头

简单场景可以直接使用 Unicode 箭头符号：

.unicode-arrow::after {
  content: "→";
  font-size: 24px;
  color: #000;
}

常用箭头符号包括 → (→), ← (←), ↑ (↑), ↓ (↓)。