纯CSS伪元素箭头最稳方案是：用::before/::after设content:""、position:absolute，结合单色边框与透明边框生成三角形，配合transform居中定位、pointer-events:none防交互异常，并用整数px边框规避IE缩放模糊。
用 ::before 或 ::after 画箭头，别用图片或 SVG
纯 CSS 三角箭头最稳的方式就是伪元素 + 边框技巧。原理是把一个宽高为 0 的元素，只设一个方向的边框（比如 border-bottom），其余三边透明，就能挤出三角形。箭头方向、大小、颜色全靠边框宽度和颜色控制。
常见错误是直接给弹出框本体加 border，结果箭头位置偏移、对不齐、响应式下错位。必须用伪元素脱离文档流，再用 position: absolute 精确锚定。
- 箭头尺寸由边框宽度决定：
border-width: 6px→ 箭头高/宽约 12px（等腰直角三角形斜边） - 指向下方的箭头：
border-top: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent; - 务必设置
content: ""，否则伪元素不渲染 - 父容器需有
position: relative，否则absolute会相对于 body 定位
箭头位置总偏移？检查 transform 和 top/left 的组合逻辑
箭头要“长在”弹出框顶部正中，但很多人写 top: -12px; left: 50%; 后发现箭头中心没对准——因为 left: 50% 是元素左边缘到父容器中心，不是中心对中心。
解决方法只有一个：用 transform: translateX(-50%) 把箭头自身水平居中。垂直方向同理，top 值得算准箭头高度（即边框宽度）。
立即学习“前端免费学习笔记（深入）”；
- 向上指的箭头（在弹出框上方）：
top: -6px; left: 50%; transform: translateX(-50%); - 向右指的箭头（在弹出框左侧）：
left: -6px; top: 50%; transform: translateY(-50%); - 避免用
margin-left: -3px这类“猜尺寸”方式，边框宽度一变就废 - 如果弹出框本身用了
transform: scale()或rotate()，伪元素也会被影响，此时需重置：transform: none
pointer-events: none 必须加在箭头上
箭头只是视觉装饰，不该拦截鼠标事件。否则 hover 弹出框时，鼠标移到箭头区域会意外触发 mouseleave，导致弹出框闪退。
这个坑几乎每个做交互弹层的人都踩过，尤其配合 transition 或 JS 显示隐藏逻辑时，现象是“鼠标一靠近箭头就关闭”。根本原因就是箭头盖住了真实内容区域，且默认有事件捕获能力。
- 伪元素默认有
pointer-events: auto，需显式设为none - 只设箭头本身，不影响弹出框主体的点击/悬停
- 不要试图用
z-index: -1解决——它会让箭头藏到父容器背后，且可能被裁剪
IE 兼容性与高缩放下的像素模糊问题
IE11 支持 ::before/::after，但边框三角在 subpixel 渲染下容易发虚，尤其是非整数缩放（如 110%、125%）时，箭头尖端出现毛边或半像素偏移。
这不是 bug，是抗锯齿机制使然。现代浏览器用更精细的子像素处理，但 IE 和部分旧 Edge 会把 0.5px 边框四舍五入成 0 或 1，导致三角塌陷或错位。
- 强制使用整数边框宽度：
border-width: 5px或7px，避开6.5px类值 - 避免用
rem或em控制箭头尺寸，优先用px - 如需支持 IE，可加一层
backface-visibility: hidden微调渲染层级，但效果有限 - 真要极致兼容，就接受它偶尔糊一下——比 JS 插入 SVG 或 canvas 绘制轻量得多
箭头看着小，但定位、事件、缩放这三块最容易反复调试。别指望一次写对，留好 outline 临时标出伪元素边界，比猜强。
