聊天气泡箭头用::before伪元素+边框技巧实现：宽高为0时单边有色、其余透明可形成三角形；需absolute定位、content:""、配合position:relative父容器及精准偏移，注意方向/颜色同步、rem适配和z-index层级。
用 ::before 伪元素 + 边框技巧画箭头
聊天气泡的箭头不是图片，也不是 SVG，而是靠一个伪元素的三角形“拼”出来的。核心是利用 CSS 边框的斜角交点——当一个元素宽高为 0，只设单边有颜色、其他三边透明时，就会形成等腰直角三角形。
常见错误是直接给气泡本体加边框三角，结果位置错乱、响应失效或盖不住背景。必须用 ::before 单独生成箭头，并用 position: absolute 精确锚定。
- 箭头元素必须设
content: ""，否则伪元素不渲染 - 推荐用
border-width: 8px控制大小，border-color: transparent transparent #fff transparent控制朝向（这里向下） - 要让箭头“贴在气泡边缘”，得配合
top/left偏移，且气泡父容器需设position: relative
箭头位置偏移总不对？检查这三点
绝对定位的箭头常“飘走”，根本原因不是坐标写错，而是定位上下文或盒模型理解偏差。
- 气泡容器没设
position: relative→ 箭头会相对于最近的position: relative/absolute/fixed祖先定位，甚至跑到body - 箭头的
top或left值没扣掉自身宽度/高度 → 比如向下箭头高 16px（两个 8px 边框），若想顶到气泡底边，应设top: 100%再微调margin-top: -8px，而非直接top: 100% - 气泡用了
border-radius但箭头没对齐圆角起点 → 箭头尖端应和气泡内容区底边对齐，不是和 border 外边缘对齐；建议气泡 padding 包住内容，箭头从 padding 区边缘出发
左右气泡的箭头方向与颜色怎么同步控制
左右气泡本质是同一套结构，靠类名切换方向和背景色，但箭头的 border-color 和定位值必须成对更新，否则出现“箭头朝左、气泡却靠右”的错位。
立即学习“前端免费学习笔记（深入）”；
- 右侧气泡（自己发的消息）：箭头在右下，用
border-left-color: #007aff，right: -8px，top: 100%，margin-top: -4px - 左侧气泡（别人发的）：箭头在左下，用
border-right-color: #e5e5ea，left: -8px，top: 100%，margin-top: -4px - 避免重复写样式：把公共部分（如宽高 0、
position: absolute）抽到基础类，方向/颜色/偏移用.bubble--mine::before这类修饰符覆盖
移动端缩放或字体变大时箭头错位怎么办
用固定像素（如 8px）写边框宽度，在 iOS「更大字体」或 Chrome 缩放下会失比例。这不是 bug，是 rem/em 未介入导致的刚性布局问题。
- 优先用
rem：设根字体为font-size: 16px，箭头边框写border-width: 0.5rem，随系统缩放自动调整 - 慎用
transform: scale()模拟缩放——它会模糊边框，且无法解决定位偏移累积误差 - 真要兼容极端情况（如无障碍放大 200%），可加媒体查询：
@media (min-resolution: 2dppx)单独调大边框，但多数场景rem已足够
最易被忽略的是：箭头的 z-index 必须高于气泡内容，否则文字可能遮住箭头尖；但又不能无脑设很高，避免干扰其他弹层。一般 z-index: 1 足够，前提是气泡本身 z-index: 0。
