当前位置：首页 > CSS

css制作空心箭头

2026-04-01 23:09:46CSS

使用 CSS 边框和旋转制作空心箭头

通过组合 CSS 的 border 属性和 transform: rotate 可以创建空心箭头。以下是一个实现向右空心箭头的示例：

css制作空心箭头

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

.arrow-right::after {
  content: "";
  position: absolute;
  left: -17px;
  top: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
}

使用伪元素和边框叠加

另一种方法是使用两个伪元素叠加，通过调整大小和位置形成空心效果：

css制作空心箭头

.arrow-hollow {
  position: relative;
  width: 40px;
  height: 20px;
}

.arrow-hollow::before,
.arrow-hollow::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
}

.arrow-hollow::before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #000;
}

.arrow-hollow::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
  top: 2px;
  left: 2px;
}

SVG 实现空心箭头

使用 SVG 可以更灵活地控制箭头的形状和样式：

<svg width="50" height="30" viewBox="0 0 50 30">
  <path d="M10,5 L40,15 L10,25 Z" fill="none" stroke="#000" stroke-width="2"/>
</svg>

使用 clip-path 创建自定义形状

CSS 的 clip-path 属性允许创建复杂的空心形状：

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

.arrow-clip::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #fff;
  clip-path: polygon(
    2% 22%,
    38% 22%,
    38% 2%,
    98% 50%,
    38% 98%,
    38% 78%,
    2% 78%
  );
  top: 2px;
  left: 2px;
}

每种方法各有优缺点，边框方法适合简单箭头，SVG 适合需要复杂样式或动画的情况，而 clip-path 则适合创建非传统形状的箭头。