三角偏移不对齐的核心是定位问题：伪元素默认以父容器左上角为原点，需配合 left: 50% 和 transform: translateX(-50%) 才能水平居中，且父元素必须设 position: relative。
用 ::before 或 ::after 画三角时，为什么三角总偏移、不对齐？
核心问题不是“怎么画”，而是“怎么定位”。伪元素默认以父容器左上角为原点，top: 0; left: 0; 并不等于“贴在下拉框顶部正中”。必须结合 transform: translateX(-50%) + 明确的 left: 50% 才能居中。
常见错误现象：triangle 靠左、靠右、悬空、被裁剪——基本都是忘了这一步。
-
position: absolute必须加在伪元素上，且其父元素（下拉容器）要设position: relative - 三角宽度靠
border实现，比如border-left: 6px solid transparent，但边框宽度会参与盒模型计算，影响定位基准 - 若下拉框有
border-radius或padding，伪元素的top值需手动微调（通常top: -6px到-10px，取决于边框粗细）
border 画三角的三种写法，哪一种最稳？
只推荐用单边实色 + 其余三边透明的写法，比如朝下的三角用 border-top: 6px solid #333 配合左右透明边框。其他方式（如旋转 skew 或 clip-path）在缩放、高DPI屏或旧浏览器里容易糊、错位。
关键参数差异：
立即学习“前端免费学习笔记（深入）”；
- 朝上三角：
border-bottom: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent; - 朝下三角：
border-top: 6px solid #333; border-left: 6px solid transparent; border-right: 6px solid transparent; - 边框值统一用
px，避免em或rem导致响应式失真
悬浮触发时三角闪动、抖动，怎么压住？
本质是渲染层切换导致的重绘抖动，尤其在 macOS Safari 和部分 Chrome 版本中明显。不是 CSS 写错了，而是浏览器对 transform + opacity 的合成策略不一致。
实操建议：
- 给伪元素加
will-change: transform（仅在需要时，别滥用） - 避免在
:hover状态里同时改top和transform，只用其中一种定位方式 - 如果下拉框本身有
transition，三角伪元素也要同步加，比如transition: opacity .2s, transform .2s - 不要用
display: none/block控制显示，改用opacity: 0; visibility: hidden;+pointer-events: none;
IE11 或低版本 Edge 下三角不显示，缺了什么？
IE11 不支持伪元素上的 transform: translateX(-50%) 对 left: 50% 的修正，会导致三角完全偏左。必须降级处理。
兼容方案（不引入 JS）：
- 用
margin-left: -6px（负值 = 三角底边宽度一半）替代transform: translateX(-50%) - 对 IE 使用条件注释或
@supports not (transform: translateX(-50%))单独覆盖 - 确保伪元素有明确的
width: 0; height: 0;，IE 对空伪元素渲染更严格
真正麻烦的不是画不出三角，是不同浏览器对“居中”的理解差那几个像素——调的时候盯着 DevTools 的 layout 边框看，比查文档管用。
