css制作箭头

使用边框制作箭头

通过设置元素的 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;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

调整 rotate 角度（如 135deg、-45deg）可改变箭头方向。

使用 SVG 内联

直接嵌入 SVG 代码生成高精度箭头，支持颜色和大小调整：

.arrow-svg {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z' fill='%23000'/></svg>") no-repeat;
  width: 24px;
  height: 24px;
}

修改 fill 颜色（如 %23ff0000 为红色）和 viewBox 尺寸可自定义样式。

使用 CSS 的 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 的坐标值可改变箭头形状和方向。

使用 Unicode 字符

简单场景下直接使用 Unicode 箭头字符（需设置字体支持）：

.arrow-unicode {
  font-family: Arial, sans-serif;
  font-size: 20px;
  content: "→"; /* 或 "↑", "↓", "←" */
}

此方法适合快速实现，但样式和大小受字体限制。