用border画小三角需设width/height为0、单边有色边框+三边transparent且等宽，父容器relative定位、子元素absolute定位，水平定位优先用transform或calc避免响应式断裂，IE8–11需用transparent显式声明四边并触发hasLayout。
用 border 画小三角为什么总偏移或错位
本质是利用 CSS 边框的斜角渲染特性，但四个方向边框交汇时，浏览器按像素对齐规则裁切，稍有尺寸或盒模型偏差就会露白、偏移或消失。
-
width和height必须为0，否则三角会被内容区域撑开、变形 - 只保留一个方向的边框（如
border-top），其余三个设为transparent，且四边宽度必须相等 - 父容器需有明确的
position: relative，小三角元素用position: absolute定位，否则会脱离上下文乱飘 - 常见翻车点：给小三角加
padding或background—— 它只能靠边框“画”出来，不是真图形
对话框气泡里小三角贴边对齐的精准控制方法
所谓“贴左/贴右/居中”，其实是在控制小三角的 left 或 right 值，但直接写死像素容易在响应式下断裂。关键在于锚定基准点。
- 把小三角的
top设为100%（下三角）或-10px（上三角），让它紧贴对话框边缘 - 水平定位优先用
transform: translateX()替代固定left值，比如left: 20px; transform: translateX(-50%)实现相对气泡左侧 20px 处居中出三角 - 若气泡宽度不固定，小三角的水平位置建议用
calc(50% - 6px)（假设三角底宽 12px），避免 JS 计算 - 注意
box-sizing：确保父容器没意外触发border-box干扰 offset 计算
IE8–IE11 下 border 小三角渲染异常怎么办
老 IE 对 transparent 边框的支持不稳定，尤其当背景是渐变或半透明时，三角常变成实色块或直接不可见。
- 不要用
rgba(0,0,0,0)代替transparent—— IE8 不认rgba作边框色 - 统一用
border-color: transparent transparent #333 transparent这类写法，显式声明四边，避免简写漏掉某边 - IE8 需额外加
*border-color: pink pink #333 pink（hack）并配zoom: 1触发 hasLayout，否则三角不渲染 - 如果项目必须零兼容成本，就别硬扛——改用 SVG 内联或 base64 小图，反而更稳
用伪元素 ::before/::after 实现小三角的注意事项
这是最常用也最容易出问题的方式：伪元素默认无尺寸，但一旦设了 content: ""，它就成了可渲染盒子，而很多人忘了清除默认行为。
立即学习“前端免费学习笔记（深入）”；
- 必须写
content: ""，空字符串也不可省；IE7 及以下要写content: " "（空格） - 伪元素默认是 inline，要设
display: block或inline-block才能生效边框 - 避免在伪元素上设
width/height，它只靠border存在；加了反而可能遮挡或错位 - 移动端 Safari 有时对
transform: rotate()画三角有渲染延迟，坚持用border方案更可靠
小三角看着简单，真正卡住人的永远是那几个像素级的偏移、透明色的兼容性、以及伪元素是否真的“存在”。调的时候别只盯着三角，先看父容器的 position 和 overflow，再查开发者工具里那个伪元素是不是被裁掉了。
