css制作导航箭头

使用伪元素创建箭头

通过 ::before 或 ::after 伪元素结合 border 属性生成三角形箭头。设置元素的 width 和 height 为 0，通过边框宽度和颜色控制箭头方向与大小。

.arrow {
  position: relative;
  display: inline-block;
  padding-right: 20px;
}
.arrow::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid #333;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

旋转边框实现多方向箭头

调整边框颜色和旋转角度可改变箭头方向。例如，下方箭头需将 border-top 设为实色，其他边框透明：

.down-arrow::after {
  border-top: 6px solid #333;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: none;
}

使用 SVG 嵌入矢量箭头

通过 SVG 实现可缩放且样式灵活的箭头。直接在 CSS 中嵌入 SVG 或作为背景图：

.svg-arrow {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='0,0 10,5 0,10' fill='%23333'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 15px;
}

利用 transform 旋转方块

将正方形元素旋转 45 度生成箭头，结合 overflow: hidden 可制作更复杂的斜角效果：

.square-arrow {
  width: 10px;
  height: 10px;
  background: #333;
  transform: rotate(45deg);
}

动画箭头效果

为悬停状态添加过渡动画，增强交互性。通过 transition 改变边框宽度或位置：

.animated-arrow::after {
  transition: transform 0.3s ease;
}
.animated-arrow:hover::after {
  transform: translateY(-50%) translateX(3px);
}

使用 Unicode 字符

直接使用 Unicode 箭头符号（如 → ▼），通过 font-size 和 color 调整样式：

.unicode-arrow::after {
  content: '→';
  margin-left: 5px;
  font-size: 1.2em;
}

每种方法适用于不同场景：伪元素方案适合轻量级实现，SVG 适合高精度控制，Unicode 则最简单快捷。可根据项目需求选择或组合使用。