使用css制作箭头

使用 CSS 制作箭头的方法

使用边框制作三角形箭头

通过设置元素的边框宽度和颜色，可以创建三角形箭头。将元素的宽度和高度设为0，然后设置不同方向的边框颜色。

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

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

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

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

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

通过伪元素和旋转可以实现更复杂的箭头样式，比如带有尾巴的箭头。

.arrow-tail {
  position: relative;
  width: 100px;
  height: 20px;
  background-color: black;
}

.arrow-tail::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 10px solid black;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

使用 SVG 内联制作箭头

SVG 提供了更灵活的箭头绘制方式，可以直接在 HTML 中嵌入 SVG 代码。

<svg width="50" height="50" viewBox="0 0 50 50">
  <polygon points="25,0 50,50 0,50" fill="black"/>
</svg>

使用 CSS 旋转和变形

通过 CSS 的 transform 属性可以实现箭头的旋转和变形效果。

.arrow-transform {
  width: 20px;
  height: 20px;
  background-color: black;
  transform: rotate(45deg);
}

使用 Unicode 字符

某些 Unicode 字符可以直接用作箭头，但样式和大小可能受限。

<span style="font-size: 24px;">→</span>

这些方法可以根据具体需求选择使用，边框法适合简单的三角形箭头，伪元素和 SVG 适合更复杂的样式。