css制作导航箭头

使用伪元素创建箭头

通过 ::before 或 ::after 伪元素结合 border 属性生成三角形箭头。示例代码：

.arrow {
  position: relative;
  width: 100px;
  height: 30px;
  background: #3498db;
}
.arrow::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #3498db;
}

使用 SVG 嵌入箭头

通过内联 SVG 实现可自定义颜色和大小的箭头：

.arrow-svg {
  background: #2ecc71;
  padding-right: 30px;
}
.arrow-svg::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%232ecc71" d="M8 5v14l11-7z"/></svg>');
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

旋转矩形模拟箭头

通过 transform: rotate() 旋转一个矩形元素：

.arrow-rotate {
  width: 100px;
  height: 30px;
  background: #e74c3c;
  position: relative;
}
.arrow-rotate::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 0;
  width: 16px;
  height: 16px;
  background: #e74c3c;
  transform: rotate(45deg);
}

使用 Unicode 符号

直接使用 Unicode 箭头字符（需考虑字体兼容性）：

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

关键注意事项

• 定位调整：箭头位置需通过 position: absolute 和 top/right 微调。
• 颜色同步：伪元素箭头的边框色需与父元素背景色一致。
• 响应式适配：使用 em 或 vw 单位确保箭头大小随布局缩放。

以上方法可根据项目需求选择，伪元素方案适合纯 CSS 场景，SVG 适合复杂箭头设计。