css3制作箭头

使用边框制作箭头

通过设置元素的边框宽度和颜色，利用透明边框的特性可以制作箭头。将一个元素的宽度和高度设为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）结合transform旋转可以制作更灵活的箭头。定义一个矩形或正方形元素，通过旋转伪元素形成箭头形状。

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

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

使用SVG制作箭头

SVG提供了更灵活的路径绘制能力，可以精确控制箭头的形状和样式。通过<path>元素定义箭头的路径。

<svg width="50" height="50" viewBox="0 0 50 50">
  <path d="M10 10 L30 25 L10 40 Z" fill="#000" />
</svg>

调整d属性的路径数据可以改变箭头的形状和方向。

使用CSS clip-path制作箭头

clip-path属性可以通过裁剪元素来形成箭头形状。使用多边形函数定义裁剪区域。

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

调整polygon的坐标可以改变箭头的形状和方向。

使用旋转和倾斜制作箭头

通过transform属性的rotate和skew函数可以调整元素的形状，形成箭头效果。

.arrow {
  width: 50px;
  height: 20px;
  background: #000;
  position: relative;
}

.arrow::before {
  content: '';
  position: absolute;
  right: -15px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #000;
  transform: skewX(-45deg);
}

调整skewX或skewY的角度可以改变箭头的倾斜程度。