当前位置：首页 > CSS

css 制作箭头

2026-01-08 21:02:50CSS

使用 CSS 边框制作箭头

通过调整元素的边框宽度和颜色，利用透明边框的特性可以创建箭头效果。例如，制作一个向右的箭头：

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

调整 border-top、border-bottom 和 border-left 的宽度可以改变箭头大小和形状。

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

通过伪元素（::before 或 ::after）结合 transform: rotate() 可以创建更灵活的箭头：

.arrow {
  position: relative;
  width: 100px;
  height: 20px;
  background: #000;
}

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

使用 SVG 内联制作箭头

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

<svg width="50" height="50" viewBox="0 0 50 50">
  <path d="M10 10 L40 25 L10 40 Z" fill="#000" />
</svg>

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

使用 Unicode 字符

简单箭头可以直接使用 Unicode 字符，搭配 CSS 调整样式：

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

.unicode-arrow {
  font-size: 24px;
  color: #000;
}

使用 CSS Clip-path 制作箭头

通过 clip-path 裁剪多边形路径实现箭头：

css 制作箭头

.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 的坐标值可以改变箭头形状。