css制作箭头

使用 CSS 边框制作箭头

通过调整元素的 border 属性，可以创建简单的箭头形状。将元素的宽度和高度设为 0，通过设置不同方向的边框宽度和颜色来形成箭头。

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black; /* 箭头方向朝下 */
}

修改 border-bottom 为其他方向（如 border-top）可以改变箭头朝向。

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

通过伪元素（::before 或 ::after）结合 transform: rotate() 实现更灵活的箭头。

.arrow {
  position: relative;
  width: 20px;
  height: 20px;
}
.arrow::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(45deg); /* 调整角度改变箭头方向 */
}

使用 SVG 内联实现箭头

通过内联 SVG 可以创建高保真且可自定义的箭头，适合复杂设计。

<div class="arrow">
  <svg viewBox="0 0 20 20" width="20" height="20">
    <path d="M0 5 L10 15 L20 5" fill="none" stroke="black" stroke-width="2"/>
  </svg>
</div>

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

使用 CSS 渐变制作箭头

通过 linear-gradient 背景生成箭头，适合需要动态颜色的场景。

.arrow {
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom right, transparent 50%, black 50%);
  transform: rotate(45deg);
}

调整 linear-gradient 的方向和 transform 角度以改变箭头样式。

使用 Unicode 字符快速实现

直接使用 Unicode 箭头字符（如 → ↓），通过 CSS 调整大小和颜色。

.arrow {
  font-size: 24px;
  color: black;
}

<span class="arrow">→</span>

这种方法简单但样式有限，适合快速原型设计。