伪元素+border是首选方案，因零dom、无js依赖、兼容ie9+且自适应缩放；原理是宽高为0时，三边transparent、单边有色border利用斜角渲染“挤”出三角，方向由着色边决定，对齐需top:50%+transform居中并微调坐标。
为什么伪元素 + border 是首选方案
因为不用额外 DOM 节点、不依赖 JS、兼容性覆盖 IE9+，且能随气泡尺寸自适应缩放。核心不是“画三角”，而是用 border 的斜角渲染特性——把一个 width: 0; height: 0 元素的四边设为 transparent，只留一边有颜色，视觉上就“挤”出三角形。
常见错误包括：content: "" 忘写（伪元素根本不渲染）、父容器漏掉 position: relative（三角飘到页面左上角）、border-style 没设 solid（默认是 none，画不出来）。
如何控制三角方向与对齐位置
方向由哪条边设了实色决定，不是“贴在哪边”，而是“朝向哪边”。例如：
- 气泡在左侧、三角需贴右边缘并朝右 → 用
border-left-color - 气泡在右侧、三角需贴左边缘并朝左 → 用
border-right-color - 气泡在上方、三角需贴下边缘并朝下 → 用
border-bottom-color
对齐关键在三点：
- 垂直居中统一用
top: 50%; transform: translateY(-50%)，比固定margin-top更稳 - 水平定位优先用
left: 50%; transform: translateX(-50%)，避免因border-width变化导致偏移 - 尖端贴边时，
top或right值要结合气泡的padding和border-radius微调，比如圆角为6px，三角根部可能需要top: calc(100% - 6px)
border-width 太小会导致高倍屏糊成一团
border-width 不仅决定三角大小，还影响清晰度。设 1px 在 Retina 屏上几乎不可见，设 2px 容易发虚。建议起步值为 6px，对应三角底边约 12px 宽、高度约 6px（等腰直角）。
必须四边 border-width 一致，混用不同值（如左 6px、下 8px）会破坏等腰结构，变成歪斜三角。单位推荐用 px，避免 em 或 rem 在缩放或字体变化时失准。
圆角三角尖角要用 radial-gradient 替代 border
当设计要求尖角带弧度（比如聊天气泡右上角柔滑过渡），border 方案无解——它只能出直角。此时必须换用 radial-gradient 在伪元素中“裁剪”圆弧轮廓。
典型写法是：
.bubble::after {
content: "";
position: absolute;
top: 0;
right: 0;
transform: translateX(100%);
width: 1em;
height: 1em;
aspect-ratio: 1/1;
background-image: radial-gradient(
farthest-side at bottom right,
transparent 100%,
var(--bg-color) calc(100% + 1px)
);
}
注意：这个方案依赖 aspect-ratio 和 radial-gradient，IE 完全不支持，Safari 14.1+ 才稳定；如果需兼容旧浏览器，仍得 fallback 到 border 直角方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
