必须给气泡容器加position: relative且伪元素写content: ""，否则箭头会因定位上下文缺失或未渲染而“飞走”；方向由实色边框决定，居中需用left/top配合transform，响应式须同步调整border-width。
必须给气泡容器加 position: relative，否则箭头会飘到页面任意位置——这不是 bug，是 CSS 定位规则本身决定的。
为什么箭头总“飞走”或根本不显示
最常见两个硬伤：position: relative 漏了，或者 content: "" 忘写了。前者让 ::before/::after 的 top/left 相对于 body 计算；后者直接导致伪元素不渲染，样式再对也白搭。
-
position: relative必须加在包裹整个气泡的最外层容器上，不是子div，也不是父级 flex 容器 -
content: ""不能写成content: " "（带空格），也不能省略引号 - 如果气泡嵌在
display: flex或display: grid的父容器里，且该父容器恰好有position: relative，那箭头就以它为基准——得确认这是否是你想要的锚点
border 三角形方向写错的典型表现
箭头朝哪边，完全由哪条边框有颜色决定，不是靠 transform 旋转“补救”的。写反了，三角形就飞出屏幕边缘，而且调试时极难一眼定位。
- 向下箭头：
border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 向上箭头：
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; - 向左箭头：
border-right: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent; - 漏掉任意一条
border-*声明（哪怕设的是transparent），某些安卓 WebView 会整块忽略三角形渲染
箭头居中对不齐？别硬算像素
因为 border 三角形实际宽高是 0，width/height 不参与盒模型计算，所以用 left: calc(50% - 8px) 这类写法极易偏 1px——尤其在缩放、不同 DPI 或字体变化时。
立即学习“前端免费学习笔记（深入）”；
- 水平居中（上下箭头）：
left: 50%; transform: translateX(-50%); - 垂直居中（左右箭头）：
top: 50%; transform: translateY(-50%); - 如果气泡用了
border-radius，箭头根部容易和圆角打架，通常要手动把top或bottom往里压 1–2px，比如top: 100%改成top: calc(100% - 2px) - IE11 不支持伪元素上的
transform，得降级为left: calc(50% - 8px)，前提是边框宽度固定
响应式下箭头变大、错位或消失
伪元素不会自动继承父元素的媒体查询样式。改了气泡尺寸，但没重置 ::before 的 top/left 和 border-width，箭头大概率被裁掉或飘到视口外。
- 媒体查询里必须显式覆盖伪元素的定位值和边框尺寸，例如小屏时把
border-width从8px改为4px -
border不支持百分比单位，border: 5% solid transparent是无效的；可用clamp(4px, 2vw, 8px)或vw单位替代 - 如果气泡整体用了
transform: scale()，箭头也要加反向缩放，否则相对位置会崩坏
真正麻烦的不是画出箭头，而是当气泡加了圆角、用了渐变背景、又要在 iOS Safari 上保证点击热区足够大时，border 三角形的边界、抗锯齿、pointer-events 这几处细节全得手动兜底——这些地方一旦漏掉，线上用户看到的就是一个“有气泡没箭头”或者“点了没反应”的残缺体验。
