伪元素+border是实现聊天气泡小三角最轻量方案，通过单边有色border与透明三边形成三角，需用top:50%+transform居中、按方向设置对应border-color（如右气泡用border-right-color），并注意overflow:visible防裁切。
聊天气泡小三角为什么必须用伪元素 + border？
因为纯 CSS 实现小三角最轻量、无需额外 DOM 节点，且能随气泡位置自适应缩放。用 ::before 或 ::after 配合 position: absolute 定位，再利用 border 的斜角渲染特性——只设单边有颜色的 border，其余三边透明，就能“画”出三角形。
关键不是“怎么画”，而是“怎么对齐”。小三角的尖端必须精确贴合气泡边缘，否则视觉上会像悬空或错位。
小三角定位不准的常见错误现象
典型表现：三角尖端偏左/偏右、上下浮动、和气泡边缘有 1px 缝隙、响应式下错位加剧。根本原因通常是：
-
top/left值写死像素（如top: 10px），没考虑气泡 padding 或字体大小变化 - 伪元素未设置
content: ""，导致不渲染 - 父容器没设
position: relative，absolute脱离了预期参考系 - 用
border-width控制大小时，忘了三角高度 =border-width× √2（实际只需记住：宽高比固定为 1:1）
左右气泡小三角的 border 写法差异
方向不同，靠哪边的 border 设颜色就不同，其余三边必须是 transparent：
右侧气泡（三角在右）：
::after {
content: "";
position: absolute;
right: -12px; /* 三角尖端紧贴气泡右边缘 */
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: #e0e0e0; /* 只有左边框有色 → 三角朝左，但我们要它朝右 → 错！*/
}
等等——这里容易翻车。正确逻辑是：哪个方向的 border 有色，三角就朝向那个方向。所以右侧气泡需要三角朝左，才贴在气泡右边；而左侧气泡需要三角朝右，才贴在气泡左边。
因此：
- 右侧气泡小三角（贴右边缘，朝左）：设
border-right-color - 左侧气泡小三角（贴左边缘，朝右）：设
border-left-color - 顶部气泡（贴上边缘，朝下）：设
border-bottom-color - 底部气泡（贴下边缘，朝上）：设
border-top-color
响应式下小三角如何保持居中对齐
用 top: 50% + transform: translateY(-50%) 是最稳的垂直居中方案，比 margin-top: -6px 更可靠。但要注意：
- 如果气泡高度不固定（比如多行文本），
top: 50%仍以父容器高度为基准，没问题 - 避免用
left/right配合固定值，改用calc(100% - Xpx)或结合transform: translateX()微调 - 小三角大小建议用
em或rem（如border-width: 0.375em），随字体缩放自动适配 - 真要兼容老浏览器（IE11），
transform需加-ms-transform前缀，但translateY(-50%)在 IE11 中表现正常，一般不用额外处理
复杂点在于气泡带圆角时，小三角根部可能被裁切——这时得给父容器加 overflow: visible（默认是 visible，但若父级设了 overflow: hidden 就会截掉三角）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
