当前位置：首页 > CSS

css制作空心箭头

2026-03-12 03:04:39CSS

使用CSS制作空心箭头

方法一：使用边框和旋转

通过调整元素的边框和旋转角度，可以创建空心箭头效果。

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

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

方法二：使用伪元素和边框

利用伪元素和边框的组合，可以更灵活地控制箭头的形状和大小。

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

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

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

方法三：使用SVG嵌入

直接使用SVG绘制空心箭头，可以更精确地控制箭头的样式和形状。

<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="M0 10 L20 10 L10 0 Z" fill="none" stroke="#000" stroke-width="2"/>
</svg>

方法四：使用clip-path

通过clip-path属性裁剪元素，形成空心箭头的形状。

css制作空心箭头

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

.arrow::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  clip-path: polygon(0% 50%, 50% 10%, 100% 50%, 50% 90%);
}