当前位置：首页 > CSS

css 制作箭头

2026-01-28 00:06:17CSS

使用 CSS 制作箭头

使用边框制作箭头

通过设置元素的边框属性，可以创建简单的箭头形状。将元素的宽度和高度设为0，通过调整边框宽度和颜色形成箭头效果。

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

调整 border-left、border-right、border-top 或 border-bottom 可以改变箭头方向。

使用伪元素制作箭头

结合伪元素 ::before 或 ::after，可以创建更复杂的箭头样式。通过旋转和定位伪元素，实现斜向箭头。

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

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

使用 transform 旋转制作箭头

通过 transform: rotate() 旋转一个矩形元素，形成箭头形状。结合 clip-path 可以进一步优化箭头样式。

.arrow {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  transform: rotate(45deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 60% 60%, 60% 100%, 0% 100%);
}

使用 SVG 内联制作箭头

在 CSS 中直接嵌入 SVG 路径，可以创建高度自定义的箭头形状。这种方法适合复杂或需要精细控制的箭头设计。

.arrow {
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

使用 CSS 渐变制作箭头

通过线性渐变或径向渐变，可以创建带有箭头效果的背景。这种方法适合简单的装饰性箭头。

.arrow {
  width: 100px;
  height: 20px;
  background: linear-gradient(45deg, transparent 15px, #3498db 15px);
}

使用 clip-path 制作箭头

clip-path 属性可以裁剪元素为任意形状，包括箭头。结合多边形路径，可以创建各种方向的箭头。

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

每种方法适用于不同的场景，边框法适合简单箭头，伪元素和 transform 适合中等复杂度，SVG 和 clip-path 适合高度自定义需求。

css 制作箭头