用::before伪元素画箭头需设content:""、position:absolute、width:0、height:0，仅保留单方向实色边框（如border-top:8px solid #333）与另三向透明边框，利用边框交汇“挤”出三角形；箭头方向由实色边框方向决定，水平居中用left:50%+transform:translateX(-50%)。
伪元素 ::before 怎么画出箭头？
箭头不是图片，也不是 SVG，而是用 ::before 生成一个三角形块，靠边框颜色“挤”出来的。原理是：把一个无宽高的元素，只设四个方向的边框，其中三个设透明，剩下一个方向设实色，就能得到指向该方向的三角形。
常见错误是忘记设 content: "" —— 没这句，::before 根本不渲染；或者忘了设 position: absolute，导致箭头跑出盒子外。
-
width和height都设为0 - 边框宽度决定箭头大小，比如
border-top: 8px solid #333+border-left: 8px solid transparent+border-right: 8px solid transparent→ 向下的小三角 - 用
top/left定位时，注意气泡主体是否用了position: relative—— 箭头必须相对于它定位，否则会相对 body 偏移
气泡内容溢出时，::before 箭头位置错乱怎么办？
当气泡内容动态变化（比如文字变多、换行、字体缩放），箭头容易“悬空”或贴不到边。根本原因是箭头用绝对定位硬编码了 left 或 top 值，没随内容自适应。
解决思路是把箭头对齐逻辑交给 CSS 计算：用 transform: translateX(-50%) 居中，再配合 left: 50%，这样即使气泡宽度变化，箭头始终在水平中心。
- 箭头父容器必须设
position: relative - 箭头本身设
position: absolute; left: 50%; transform: translateX(-50%) - 如果箭头要靠右/靠左对齐（比如聊天消息），就别用
left: 50%，改用right: 20px这类固定偏移，但得同步控制气泡最小宽度，避免箭头被裁
不同方向的气泡（上/下/左/右）怎么统一维护？
写四套几乎一样的 CSS 很容易漏改、难复用。推荐用 BEM 或属性选择器区分方向，比如加 data-dir="top"，然后用属性选择器批量控制箭头位置和边框。
性能上没区别，但可维护性差太多：手动复制粘贴 ::before 规则，改一个方向漏了另一个，上线后发现右向气泡箭头颜色错了。
- 统一用
data-dir控制方向，避免 class 泛滥（如tooltip--toptooltip--right） - 箭头共用
border-width和background变量，用CSS custom property管理颜色和尺寸 - 右向气泡的箭头要用
border-left+ 透明上下边，别错写成border-right—— 否则箭头朝反方向飞出去
移动端适配时，::before 箭头模糊或锯齿严重
这不是 bug，是高清屏下边框抗锯齿失效的典型表现。1px 边框在 2x 屏上实际是 0.5 物理像素，浏览器渲染模糊或干脆跳过。
最稳方案是放弃纯边框三角，改用 clip-path 或背景渐变，但兼容性受限；次选是用 transform: scale(2) 配合 transform-origin 缩放后再反向缩小容器，让边框物理像素达标。
- 安卓 UC、iOS Safari 对
clip-path: polygon()支持尚可（>= iOS 12.2），但旧版微信 WebView 不认 - 如果坚持用边框法，把
border-width设为2px，再用transform: scale(0.5)缩回视觉大小，能显著减少模糊 - 别依赖
device-pixel-ratio媒体查询做 hack —— 现代浏览器基本不触发，且维护成本高
事情说清了就结束。真正麻烦的从来不是画出箭头，而是当气泡要支持 RTL、动画入场、无障碍焦点、主题色切换时，那个 ::before 还能不能稳住位置、颜色和清晰度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
