用伪元素::before/::after画三角需父容器设position: relative，通过单边实色边框（如border-top-color）配合transparent其余三边实现，方向由有色边决定，大小由border-width控制，定位推荐transform微调而非margin，ie8需降级为png或svg。
用 ::before 和 ::after 画三角，别碰 float
浮动（float）在气泡框里基本没用，反而会破坏定位流。真正靠谱的是用伪元素 + position: absolute 配合父容器的 position: relative。三角本质是边框色叠加出来的视觉 trick —— 只给一个方向设 border，其余三边透明，再缩放尺寸就能出尖角。
- 三角方向由哪条边有颜色决定：
border-top-color向上，border-bottom-color向下，以此类推 - 必须同时设置
border-style: solid，否则不渲染 - 父容器漏加
position: relative是最常见失效原因，伪元素会相对 body 定位 - 三角大小靠
border-width控制，比如5px就是高宽各 10px 的等腰直角三角
三角位置偏移总不对？重点看 top/left 和 transform 配合
光靠 top 和 left 很难对齐，尤其当气泡宽度不固定时。推荐用 transform: translate() 做微调，它基于自身尺寸计算，更稳定。
- 向下箭头贴底居中：父容器
bottom: 0，伪元素top: 100%+left: 50%+transform: translateX(-50%) - 向右箭头贴右：父容器
right: 0，伪元素left: 100%+top: 50%+transform: translateY(-50%) - 避免用
margin拉三角，它受盒模型影响大，响应式下容易错位
IE8 不支持伪元素？老项目得换方案
::before 和 ::after 在 IE8 只支持单冒号写法 :before，且不支持 content 插入空格以外的内容。如果必须兼容，就别用伪元素画三角。
- 改用一张小 PNG 箭头图，用
background-image贴在气泡边缘 - 或用内联
<svg></svg>，体积小、可缩放、IE9+ 全支持 - 千万别用
filter: progid:DXImageTransform.Microsoft.Alpha搞 CSS 三角，兼容性和维护性都极差
气泡内容撑开后三角错位？检查 box-sizing 和 padding
当气泡里文字换行或图片加载后高度变化，三角经常“飘”走。根本原因是伪元素的 top/left 值是静态计算的，没随内容重排。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器用了
box-sizing: border-box，避免padding意外撑大尺寸 - 如果气泡高度动态，三角定位逻辑就得配合 JS 重算（比如监听
resize或用ResizeObserver） - 纯 CSS 场景下，尽量让气泡最大高度可控，比如用
max-height+overflow-y: auto，比任由内容撑开更稳妥
三角看着简单，但和父容器定位、内容流、盒模型、浏览器兼容全绑在一起。最容易被忽略的是：伪元素的 position 依赖父级 relative，而这个父级本身又常被其他布局规则干扰 —— 所以调试时先盯死它的 position 值和是否被覆盖。
