当前位置：首页 > CSS

css箭头制作教学

2026-03-12 14:27:09CSS

使用边框制作箭头

通过设置元素的 border 属性，利用透明边框和实色边框的组合生成箭头效果。例如，制作一个向右的箭头：

.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-custom {
  position: relative;
  width: 20px;
  height: 20px;
}
.arrow-custom::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}

通过修改 rotate 角度和边框方向调整箭头指向。

css箭头制作教学

SVG 箭头

使用内联 SVG 绘制箭头，适合复杂样式或动画需求：

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

通过调整 path 的 d 属性定义箭头形状，支持填充颜色和描边。

css箭头制作教学

Unicode 字符

直接使用 Unicode 箭头符号（如 → ↑），通过 CSS 控制样式：

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

HTML 中插入对应字符：

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

使用 clip-path

通过 clip-path 裁剪元素形状生成箭头：

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

修改 polygon 的坐标点可自定义箭头形状。