用border+transparent可画任意方向三角形，原理是零宽高元素边框交界形成等腰直角三角；容器必须设position: relative，伪元素需content、width/height为0，方向与边框属性严格对应。
直接用 border 配合 transparent 就能画出所有方向的三角形，气泡本身只需一个带 position: relative 的容器 + 伪元素三角即可稳定实现——但 90% 的翻车都卡在定位上下文或边框方向写反上。
为什么 border 能画三角形？
本质是浏览器对零宽高元素边框的渲染逻辑：当 width: 0、height: 0 时，四条边框在交界处形成四个等腰直角三角形区域。只保留其中一条边有颜色，其余三边设为 transparent，就能“露出”一个方向明确的三角。
-
border-top-color非透明 → 朝下的三角（顶边实色，向下指） -
border-bottom-color非透明 → 朝上的三角（底边实色，向上指） -
border-left-color非透明 → 朝右的三角（左边实色，向右指） -
border-right-color非透明 → 朝左的三角（右边实色，向左指） - 边框宽度（如
8px）决定三角高度和底边长度；不建议用px以外单位，否则响应式下易失真
::before 或 ::after 三角总飘到左上角？
这是最常被忽略的硬性前提：气泡容器必须显式声明 position: relative，否则伪元素会向上寻找最近的已定位祖先，大概率锚定到 body 或外层滚动容器。
- 错误写法：
.chat-list { position: relative; }→ 所有三角都挤在列表顶部 - 正确写法：
.message-bubble { position: relative; }→ 每个气泡独立拥有定位上下文 - 伪元素必须带
content: ""，否则不渲染；width: 0; height: 0;缺一不可 - 垂直居中别用
top: 12px，要用top: 50%; transform: translateY(-50%)，否则多行文本时三角偏移
左右气泡三角方向怎么配才不翻车？
方向和边框属性必须严格对应，写反就指向对面——不是“看起来不对”，是逻辑上就错了。
- 右侧气泡（用户消息）：三角贴右边缘、朝左 → 用
border-right-color+right: -8px - 左侧气泡（AI/系统消息）：三角贴左边缘、朝右 → 用
border-left-color+left: -8px - 三边必须明确写
transparent，不能省略或写成none；border-style: solid不能漏 - 如果气泡有
padding-top: 10px，别把三角的top改成10px——那只是单行巧合，多行必错
带边框的气泡怎么让三角也带边框？
纯 border 三角无法直接描边，得用双层叠加：一个稍大的同色三角作“边框”，一个稍小的背景色三角盖在上面居中。
- 外层三角（边框）：
border-width: 10px，颜色 = 容器边框色，z-index: 1 - 内层三角（填充）：
border-width: 8px，颜色 = 容器背景色，z-index: 2，top: 1px; left: 1px微调对齐 - 不用
box-shadow模拟边框，它在圆角或缩放下会糊边、错位 - 如果用了
border-radius，三角位置要避开圆角区域，否则视觉上会“断开”
真正难的从来不是画出三角，而是让三角在各种文本高度、滚动状态、缩放比例下始终咬准那个像素点——position: relative 和 transform: translateY(-50%) 这两句，少一个都算没写完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
