用 CSS border 实现纯色小箭头最稳，原理是三边透明、一边有色形成三角，需注意宽高为0、避免四边设色、用 transform 微调、伪元素需 content 和 display、SVG 适合高保真场景。

用 CSS border 实现纯色小箭头最稳

绝大多数场景下，用 border 画三角形箭头是首选——不依赖图片、无渲染延迟、缩放不糊、兼容到 IE8。核心原理是利用元素三边设为透明 border，剩下一侧设颜色，让 border 交汇处自然形成三角。

常见错误：直接给 width/height 设为 0 却忘了 border 宽度，结果箭头没出现；或四边都设了 border 颜色，变成实心方块。

实操建议：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 写法示例：

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

• 方向控制：哪边的 border 有颜色，箭头就朝反方向（如 border-top 有色 → 箭头朝下）
• 要微调位置？别改 margin，优先用 transform: translateY() 避免布局塌陷
• IE8 下若箭头边缘发虚，加 zoom: 1 触发 hasLayout

用伪元素 ::before/::after 插入箭头更灵活

当箭头需跟随文字、按钮或下拉菜单动态出现时，硬塞一个空 <span> 不优雅。伪元素能保持 HTML 干净，且可继承父级颜色、字体大小等样式。

立即学习“前端免费学习笔记（深入）”；

容易踩的坑：伪元素默认是 inline，border 三角需要 display: block 或 inline-block 才生效；另外忘记设 content: "" 会导致伪元素不渲染。

实操建议：

• 典型写法：

  .btn::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 4px;
    vertical-align: middle;
  }

• 用 currentColor 替代写死颜色，按钮换色时箭头自动同步
• 若父容器用了 font-size: 0（如清除 inline 元素间隙），伪元素里的 border 尺寸会失效，此时应显式设置 font-size: 12px 或改用 em 单位

SVG 箭头适合高保真或动态变色需求

当需要抗锯齿、旋转动画、路径描边、或响应式缩放不失真时，<svg> 是更现代的选择。它本质是矢量图形，和 CSS border 方案不冲突，可混合使用。

注意点：内联 SVG 的 width/height 若设为固定像素，在移动端可能被截断；且默认不继承父元素颜色，fill 需手动设或用 currentcolor。

实操建议：

• 最小可用 SVG 箭头：

  <svg width="10" height="6" viewBox="0 0 10 6">
    <polygon points="0,0 10,0 5,6" fill="currentColor"/>
  </svg>

• 想让 SVG 响应父元素字号？把 width/height 改成 em 单位，viewBox 保持不变
• 和伪元素配合用？把 SVG 写进 content 属性里不现实，改用 background-image: url("data:image/svg+xml,...") 编码后嵌入（注意 URL 编码斜杠和引号）

箭头对齐总偏移？重点查 vertical-align 和盒模型

箭头和文字/图标看起来“没对齐”，90% 是因为行内元素的基线对齐逻辑在作怪，不是箭头本身画歪了。

典型现象：箭头比文字低一截、悬停时突然跳动、Flex 布局中莫名错位。

实操建议：

• 给箭头元素加 vertical-align: middle 或 vertical-align: -0.125em（更精准，适配多数字体）
• 如果用了 display: inline-block，确认父容器没有 font-size: 0 或 line-height 过大
• Flex 容器中，箭头默认是 align-items: stretch，加 align-self: center 更可控
• 用浏览器开发者工具选中箭头，看 computed 样式里 box-sizing 是否为 border-box —— border 三角依赖这个计算方式

实际项目里，border 三角应付大多数按钮/下拉指示足够；伪元素方案省 HTML 结构；SVG 适合设计要求高或需动画的场景。真正难的不是画出箭头，而是让它在各种字号、行高、缩放、主题色切换下始终稳定对齐——这得靠 vertical-align、currentColor 和反复检查盒模型行为。