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-top或border-bottom的宽度和颜色可改变箭头方向和大小。

使用伪元素制作箭头

利用::before或::after伪元素结合旋转和边框属性生成箭头。这种方法适用于需要更复杂箭头样式的情况。

.arrow::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}

通过调整transform的旋转角度（如45deg、135deg）可改变箭头指向。

使用SVG内联制作箭头

直接在HTML中嵌入SVG代码，通过path元素绘制精确的箭头图形。这种方法支持自定义颜色和大小。

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

修改d属性中的路径数据可调整箭头形状，例如改为M0 0 L10 10 L0 20生成向右箭头。

使用CSS clip-path制作箭头

通过clip-path属性裁剪元素形状，生成多边形箭头。适合需要非直角箭头的场景。

.arrow {
  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的坐标点可改变箭头轮廓，例如polygon(0% 0%, 100% 50%, 0% 100%)生成简单三角形箭头。

使用Unicode字符模拟箭头

直接使用Unicode箭头符号，结合CSS调整颜色和大小。适用于简单场景。

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

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

常用Unicode箭头符号包括→（→）、↑（↑）、↓（↓）、←（←）等。