用::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边框+绝对定位的兼容性最敏感
箭头看着简单，但真正上线前至少要在三台不同屏幕密度的真机上测一遍对齐和清晰度——这点最容易被跳过。