用border画小三角是最直接、最兼容的纯CSS Tooltip箭头方案，原理是宽高为0元素仅单边设色、其余三边透明，形成等腰直角三角形；大小由border-width决定，方向由设色边决定，常见错误包括宽高非零、四边border未统一处理或定位不精准。
用 border 画小三角是最直接、最兼容的方式
纯 CSS 实现 Tooltip 的箭头，border 是唯一不需要额外标签、不依赖伪元素叠加、且 IE8+ 都支持的方案。原理是利用边框交汇处的斜角特性：把一个宽高为 0 的元素，只设一个方向的 border（比如 border-top），其余三边设为透明，就能得到一个等腰直角三角形。
常见错误是给三角容器设了 width/height，或四个方向 border 都写了但没统一颜色/宽度——这样三角会变形或消失。
- 三角大小由
border-width决定，例如border-top: 6px solid #333生成一个高 6px 的向下指的三角 - 必须同时设置
border-left和border-right为透明，否则三角会被“撑开”成梯形 - 若要居中对齐 Tooltip 主体，三角的
left或right值需按公式计算：50% - border-width
用 ::before 和 ::after 双伪元素防锯齿和遮挡
单靠一个伪元素画三角，在高缩放或 Retina 屏上容易发虚，且当 Tooltip 贴近父容器边缘时，三角可能被裁剪。稳妥做法是用 ::before 画背景色三角，::after 叠一层同色但略大一点的三角作“描边”，视觉上更锐利；或者让 ::after 画三角、::before 画 Tooltip 主体背景，避免 z-index 冲突。
关键点在于两个伪元素必须共用同一套定位（position: absolute + top/left），且 z-index 明确区分层级。
立即学习“前端免费学习笔记（深入）”；
-
::after画三角时，content: ""不可省略，否则伪元素不渲染 - 三角的
transform: translateX(-50%)比硬写left: calc(50% - 6px)更安全，避免因父元素 padding 影响偏移 - 若 Tooltip 出现在右侧（
right: 100%），三角要用border-left，且right定位需配合transform: translateX(50%)
响应式下三角位置错乱？检查 transform 和 position 的组合
Tooltip 在移动端弹出后三角偏左/偏右，大概率是 transform: translateX(-50%) 作用在了相对定位的父元素上，而该父元素本身宽度随屏幕变化。更可靠的做法是让三角伪元素脱离文档流（position: absolute），并基于 Tooltip 主体的 left/right 值做绝对定位，而不是依赖 transform 居中。
- 不要对整个 Tooltip 容器设
transform，它会影响子元素的绝对定位参考系 - 三角的
top值应固定（如top: 100%表示在 Tooltip 上方），而非用top: -6px这类 magic number - 如果 Tooltip 动态计算位置（如避开视口边缘），三角的
left/right必须同步更新，不能只靠 CSS 自动居中
IE 下三角模糊或错位？绕过 transform 和 rgba 边框
IE9–11 对 transform 的 subpixel 渲染支持差，translateX(-50%) 容易导致三角偏 1px；同时 IE 不支持 border-color: rgba()，设半透三角会直接变实色。解决方案是回归原始 border 技术，用纯色 + 父容器背景色模拟“镂空”效果，或改用 SVG 内联。
- 避免在 IE 条件下使用
transform控制三角位置，改用margin-left: -6px（三角 width 为 12px）手动微调 - 若需透明三角，用
background: url("data:image/svg+xml,...")内联 SVG，比 PNG 更轻量且可缩放 - 务必测试
box-sizing: border-box是否影响 Tooltip 宽度计算——IE 下它可能让width: 200px的容器实际占位变大，挤偏三角
实际中最容易被忽略的是三角与 Tooltip 主体之间的 margin 缝隙：很多人以为设了 top: 100% 就严丝合缝，但默认行内元素有基线对齐带来的空白，必须给 Tooltip 容器加 font-size: 0 或 line-height: 0 才能真正贴紧。
