css3制作箭头

CSS3 制作箭头的方法

使用边框（Border）创建三角形箭头

通过设置元素的 border 属性，可以利用边框的斜切特性生成三角形箭头。将元素的宽度和高度设为 0，并设置不同方向的边框颜色，即可形成箭头形状。

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

调整 border-left、border-right、border-top 或 border-bottom 的宽度和颜色，可以改变箭头的方向和大小。

使用旋转（Transform）创建箭头

通过 transform: rotate() 旋转一个矩形或正方形元素，可以生成斜向箭头。通常需要配合伪元素（::before 或 ::after）实现。

.arrow {
  position: relative;
  width: 20px;
  height: 20px;
}

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

使用 SVG 内联创建箭头

SVG 提供更灵活的箭头绘制方式，适合复杂或自定义箭头形状。可以通过 path 或 polygon 定义箭头路径。

.arrow {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M0,0 L10,5 L0,10 Z' fill='black'/></svg>");
}

使用 Unicode 或图标字体

某些 Unicode 字符（如 →、↓）或图标字体（如 Font Awesome）可以直接作为箭头使用。

.arrow {
  font-family: "Font Awesome";
  content: "\f061"; /* Font Awesome 右箭头 */
}

注意事项

• 边框法适合简单箭头，但无法实现斜线箭头或复杂形状。
• SVG 法支持高保真设计，且可通过 CSS 控制颜色和大小。
• 图标字体需要加载外部资源，可能影响性能。

根据需求选择合适的方法，边框法适合轻量级实现，SVG 或图标字体适合复杂场景。