当前位置：首页 > CSS

css制作向下箭头

2026-04-02 17:17:04CSS

使用 CSS 边框制作向下箭头

通过调整元素的边框属性，可以创建一个简单的向下箭头。将元素的宽度和高度设为0，利用边框的透明效果实现箭头形状。

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

使用伪元素和旋转制作向下箭头

通过伪元素结合 transform 旋转，可以生成更灵活的箭头样式。

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

.arrow-down::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  transform: translate(-50%, -50%) rotate(45deg);
}

使用 SVG 嵌入向下箭头

SVG 提供更精确的控制，适合需要复杂样式或动画的箭头。

<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="M5 7.5 L10 12.5 L15 7.5" stroke="#000" stroke-width="2" fill="none" />
</svg>

使用 Unicode 字符显示向下箭头

直接使用 Unicode 字符可以快速实现箭头效果，适合简单场景。

<span style="font-size: 24px;">↓</span>

结合动画增强交互效果

通过 CSS 动画让箭头在悬停或点击时产生动态效果。

css制作向下箭头

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  transition: transform 0.3s ease;
}

.arrow-down:hover {
  transform: translateY(5px);
}