用 transform 微调三角箭头比 margin 更稳定，需匹配 border 方向、统一 px 单位，IE 降级用 margin+覆盖，伪元素实现动态绑定并注意 z-index 层级。
三角箭头位置偏移、不贴边：用 transform 微调比改 margin 更稳
纯 CSS 三角（如 border 技巧生成的）一旦加了 position: absolute，就容易和提示框本体错位——尤其在响应式或字体缩放时。根本原因是三角的“锚点”在自身左上角，而视觉上你希望它对齐提示框的某条边。
常见错误是靠 top/left 硬调，结果换字号/缩放就飘；或者用 margin 拉，但 margin 会参与盒模型计算，影响父容器布局。
- 优先用
transform: translate(-50%, -50%)居中定位三角，再配合top和left定大方向 - 例如右上角箭头：设
top: 12px; right: 16px;，再加transform: translate(100%, -50%)让三角尖端精准咬合提示框右边缘 - 避免同时设置
right和left，CSS 会忽略其中一个，行为不可控
不同方向三角的 border 写法必须匹配定位方向
三角本质是三边透明、一边有色的 border 交汇点。写反了方向，箭头就朝错地方，还可能漏出多余像素。
比如提示框在目标元素下方、箭头要指向上方，就得让 border-bottom 为实色，其余三边透明；若误写成 border-top，箭头就朝下了。
立即学习“前端免费学习笔记（深入）”；
- 上箭头：
border-bottom: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 右箭头：
border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent; - 尺寸统一用 px，别混用 em/rem——
border不继承字体大小，混用会导致三角大小失准
IE11 及以下不支持 transform 的降级方案：用 margin + 固定尺寸兜底
老浏览器里 transform 无效，translate 失效后三角直接卡在左上角。不能只写现代写法。
兼容写法不是加前缀（IE11 已不支持 -ms-transform），而是用层叠覆盖：
- 先写 IE 友好定位：
top: 12px; right: 16px; margin-left: -8px;（-8px 是三角宽度一半） - 再覆盖现代写法：
transform: translate(100%, -50%);，高版本浏览器会覆盖掉margin - 注意：IE 下
margin-left值必须严格等于三角 base 宽度的一半，否则偏移量随border-width变化而失效
提示框宽高动态变化时，三角位置断裂：绑定伪元素而非独立 DOM 节点
如果把三角做成单独的 <div>，提示框内容变多导致高度撑开，三角不会自动跟着动——因为它是绝对定位在父容器上的，和内容无关联。
<p>正确做法是用 <code>::before 或 ::after 伪元素画三角，它天然依附于提示框元素的盒模型。
- 伪元素的
top/right值是相对于提示框内容区计算的，内容撑开不影响定位基准 - 确保提示框本身有
position: relative，否则伪元素的absolute会往上找最近的定位祖先，可能错位到 body 上 - 别给伪元素设
width/height，三角只靠border构建，设宽高反而干扰渲染
最易被忽略的是三角的 z-index 层级——它常被提示框的阴影或边框盖住。伪元素默认和宿主同层，但若提示框用了 transform 或 opacity，会创建新层叠上下文，这时得给伪元素显式加 z-index: 1 才能浮在最前。
