当前位置：首页 > CSS

css制作箭头详解

2026-03-12 09:47:30CSS

使用边框制作箭头

通过CSS的border属性可以创建简单的箭头效果。利用透明边框和实色边框的组合，形成三角形箭头。

.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的宽度和颜色，可以改变箭头的方向和大小。

使用伪元素制作箭头

结合伪元素和transform属性，可以创建更灵活的箭头效果。

.arrow-container {
  position: relative;
  width: 100px;
  height: 40px;
  background: #3498db;
}

.arrow-container::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #3498db;
}

使用SVG内联制作箭头

SVG提供更精确的箭头控制，适合复杂或动态箭头效果。

<div class="svg-arrow">
  <svg width="50" height="50" viewBox="0 0 50 50">
    <path d="M10,25 L40,25 M40,25 L25,10 M40,25 L25,40" stroke="#000" stroke-width="2" fill="none" />
  </svg>
</div>

通过调整path的d属性，可以自定义箭头的形状和方向。

使用clip-path制作箭头

clip-path属性允许通过多边形裁剪创建箭头形状。

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

修改clip-path中的多边形顶点坐标，可以调整箭头的样式和比例。

使用旋转和定位制作动态箭头

结合transform的旋转功能，实现跟随交互的动态箭头。

css制作箭头详解

.dynamic-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.dynamic-arrow:hover {
  transform: rotate(135deg);
}

通过改变rotate的角度值，可以控制箭头的旋转方向和动画效果。