用::before或::after画三角形本质是利用0宽高元素的边框透明色视觉技巧，通过设置单边颜色与absolute定位实现微信气泡箭头效果。
用 ::before 或 ::after 画三角形，本质是边框的视觉 trick
微信气泡那个小箭头不是图片，也不是 SVG，就是纯 CSS 边框“挤”出来的。关键点在于：当一个元素 width 和 height 都是 0，只给某一条边设颜色、其余三边设 transparent，它就自动变成一个等腰直角三角形。
- 指向右：只设
border-left-color，其他三边transparent - 指向左：只设
border-right-color - 指向下方：只设
border-top-color - 三角大小由
border-width决定——比如border-width: 8px，三角底边就是 16px，高是 8px
伪元素定位必须配合 position: absolute 和父容器 position: relative
箭头要“长在”气泡边上，而不是飘在别处，这就要求父容器（气泡本身）必须有定位上下文。常见错误是忘了加 position: relative，结果箭头相对于整个页面定位，一动就飞走。
- 气泡容器加
position: relative - 伪元素用
position: absolute，再通过top/bottom+left/right精确定位 - 注意
top: 15px这类值不是固定套路，得根据气泡内边距、行高、圆角弧度反复微调，尤其在不同字号下偏移量会变
左右气泡的颜色、对齐、箭头方向必须成套处理
微信风格的核心识别逻辑是：右对齐 = 我发的 = 蓝色背景 + 箭头在右边；左对齐 = 对方发的 = 灰色背景 + 箭头在左边。漏掉任一环，视觉逻辑就断了。
- 用
align-self: flex-end（flex 布局）或float: right控制左右对齐 - 背景色、文字色、箭头边框色必须一致，比如右气泡箭头用
border-left-color: #007aff，背景也得是#007aff - 左气泡的箭头伪元素用
::before放左边，右气泡建议用::after放右边，避免左右同时用同一伪元素导致样式冲突
移动端适配时，border-width 和 border-radius 容易失真
在 iPhone 或安卓高 DPR 屏幕上，如果直接写死 border-width: 8px，缩放后箭头可能模糊或错位；圆角也可能在某些 Android WebView 里渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 优先用
rem或em单位控制border-width和border-radius，让它们随根字体缩放 - 避免在
border里混用px和百分比，会导致计算偏差 - 真机测试时重点看 iOS Safari 和微信内置浏览器，这两个对
transparent边框+绝对定位的兼容性最敏感
