border法是唯一稳定兼容ie8+的纯css三角形方案：需width/height为0、三边transparent、单边solid，方向由有色边决定，大小由border-width控制，伪元素需content: ""且父容器设position: relative。
用 border 画三角形是唯一靠谱方案
纯 CSS 画三角形，border 是最稳定、兼容性最好、无需 JS 的方式。其他方法（比如 clip-path 或伪元素旋转）要么不支持旧浏览器，要么在高缩放或 Retina 屏下边缘发虚。border 三角形本质是利用边框交汇时的斜角，只要三边设为透明、一边设为实色，就能“挤”出一个清晰锐利的三角。
关键点：
-
width和height必须为0，否则三角形会被撑开变形 - 四条边框宽度要一致，比如都设
10px，才能保证角度标准 - 只保留一个方向的边框颜色（如
border-bottom-color: #333），其余三边必须是transparent - 若需居中对齐气泡主体，得用负 margin 偏移：三角形宽高各为
20px时，margin-top: -10px才能垂直居中
气泡主体 + 三角形组合的定位陷阱
很多人把三角形做成子元素，然后用 position: absolute 定位，结果发现三角形随内容高度变化“漂移”。根本原因是没固定气泡主体的 position: relative，导致绝对定位的三角形参照的是最近的定位祖先，而不是气泡本身。
正确做法：
- 气泡容器（如
.tooltip）必须设position: relative - 三角形用
::after伪元素生成，position: absolute，并显式设置top/left（比如bottom: -10px+left: 20px） - 避免用
transform: translate微调位置——它会触发重绘，且在某些安卓 WebView 中导致模糊 - 如果气泡要适配左右切换（如空间不足时自动换边），别靠 JS 改 class，直接用
[data-placement="right"]::after这类属性选择器更轻量
IE8–IE11 下 border-color: transparent 的兼容问题
IE8 不支持 transparent 作为 border-color 值，会渲染成黑色边框，直接破坏三角形。这不是 bug，是规范实现差异。
绕过方式只有两个：
- 对 IE8 单独 hack：
border-color: \9 #000 #000 #000\9（利用 IE8 特有的 CSS hack 重置三边为透明等效值） - 更稳妥的做法：改用
border-style: solid+border-color: #333 transparent transparent transparent，IE8 能识别这种写法，但必须四值写全，不能简写为transparent - 别试图用
rgba(0,0,0,0)替代 —— IE8 不支持 rgba，会退化为黑色
移动端点击穿透与 z-index 失效
在 iOS Safari 或部分安卓浏览器中，气泡弹出后点击三角形区域，事件可能穿透到下方元素，尤其当气泡用了 opacity 或 transform。这不是 CSS 问题，而是浏览器合成层判断失误。
解决它不靠加 z-index（z-index 对伪元素无效），而靠强制创建新层：
- 给气泡容器加
transform: translateZ(0)或will-change: transform - 三角形伪元素必须有明确的
content: ""，空 content 会导致某些 WebView 忽略渲染层 - 避免给三角形设
pointer-events: none——这会让整个区域不可点击，破坏可访问性
三角形的像素级对齐和层叠顺序，往往比内容排版更容易出问题；多在真机上连按几次再看效果，比在 DevTools 里调数值更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
