css箭头制作

CSS箭头制作方法

使用边框属性制作三角形箭头

通过设置元素的width和height为0，利用边框属性生成三角形箭头。调整不同方向的边框宽度和颜色可控制箭头方向。

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

旋转正方形制作箭头

创建一个正方形元素，通过transform: rotate()旋转45度形成箭头效果。结合定位可控制箭头位置。

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

使用伪元素创建复杂箭头

通过::before或::after伪元素结合边框或旋转实现更复杂的箭头样式。这种方法适合需要多部分组合的箭头设计。

.element::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

SVG内联箭头

直接在CSS中使用SVG代码创建可缩放的高质量箭头。这种方法支持颜色和尺寸的灵活调整。

.arrow {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='0,0 10,0 5,10'/></svg>");
}

clip-path裁剪形状

使用clip-path属性通过多边形路径裁剪出箭头形状。这种方法支持创建任意角度的箭头。

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

每种方法适用于不同场景：简单三角形推荐边框属性，需要精确控制时选用SVG或clip-path，伪元素适合附加在现有元素上的箭头指示。