css箭头制作

使用边框制作箭头

通过CSS的边框属性可以创建简单的箭头效果。设置元素的宽度和高度为0，利用边框的透明和实色组合形成箭头形状。

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

调整border-left、border-right、border-top或border-bottom的宽度和颜色可以改变箭头方向和大小。

使用伪元素制作箭头

结合伪元素和旋转变换可以创建更灵活的箭头。通过::before或::after生成内容，并应用旋转效果。

.arrow {
  position: relative;
  width: 100px;
  height: 20px;
  background: #333;
}

.arrow::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #333;
  transform: rotate(45deg);
}

使用SVG内联箭头

直接在HTML中嵌入SVG代码可以创建高保真箭头，适合需要复杂形状或动画的场景。

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

SVG路径可通过修改d属性调整箭头形状，支持填充和描边样式。

使用clip-path裁剪箭头

通过clip-path属性裁剪元素为多边形箭头形状，适合现代浏览器。

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

调整polygon的顶点坐标可改变箭头方向和锐度，支持百分比或像素值。

旋转字符模拟箭头

使用特殊字符（如›或◀）配合CSS旋转，快速实现简单箭头。

.arrow {
  font-size: 24px;
  transform: rotate(90deg);
  display: inline-block;
}

这种方法适合文本环境中快速插入方向指示，但可定制性较低。