当前位置：首页 > CSS

css怎么制作箭头

2026-01-28 17:15:07CSS

使用边框制作箭头

通过设置元素的边框宽度和颜色，将三个边框设为透明，留下一个边框显示为箭头形状。例如制作向右的箭头：

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

使用伪元素制作箭头

通过 ::before 或 ::after 伪元素结合旋转和边框实现更灵活的箭头：

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

使用 SVG 制作箭头

通过内联 SVG 实现可缩放且样式灵活的箭头：

<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="M0 10 L20 10 M20 10 L10 0 M20 10 L10 20" stroke="#000" stroke-width="2"/>
</svg>

使用 CSS 旋转制作箭头

通过旋转矩形元素制作箭头：

.arrow-rotate {
  width: 15px;
  height: 3px;
  background-color: #000;
  position: relative;
}
.arrow-rotate::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 3px;
  background-color: #000;
  transform: rotate(45deg);
  right: -3px;
  top: -3px;
}

使用 clip-path 制作箭头

通过裁剪路径创建任意形状的箭头：

css怎么制作箭头

.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%);
}

每种方法适用于不同场景：边框法简单但形状有限，伪元素法更灵活，SVG法适合复杂图形，旋转法适合特定角度，clip-path法适合创建自定义形状。