css如何制作箭头

使用 CSS 边框制作箭头

通过调整元素的边框宽度和颜色，可以创建简单的箭头效果。将元素的宽度和高度设为0，利用边框的透明属性实现箭头形状。

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

调整 border-left、border-right 和 border-bottom 的值可以改变箭头的方向和大小。

使用伪元素制作箭头

通过 ::before 或 ::after 伪元素结合 transform 旋转，可以生成更灵活的箭头。

.arrow {
  position: relative;
  width: 100px;
  height: 30px;
  background: #3498db;
}
.arrow::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 15px solid #3498db;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

使用 SVG 制作箭头

SVG 提供了更精确的箭头控制，适合复杂或动态箭头需求。

<svg width="100" height="50" viewBox="0 0 100 50">
  <path d="M0,25 L80,25 L70,10 L100,25 L70,40 L80,25 Z" fill="#000"/>
</svg>

通过调整 path 的 d 属性可以自定义箭头形状和方向。

使用 CSS 旋转和定位

通过 transform: rotate() 旋转一个矩形元素，可以生成斜向箭头。

.arrow {
  width: 20px;
  height: 20px;
  background: #000;
  transform: rotate(45deg);
}

结合 position 和 transform-origin 可以调整箭头的旋转基点和位置。

使用 clip-path 制作箭头

clip-path 允许通过多边形裁剪生成箭头形状。

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

调整 polygon 的坐标值可以自定义箭头的形状和大小。