纯CSS箭头通过::before伪元素配合0宽高、单色边框实现三角形；需设content:""和定位；气泡箭头对齐用left:50%+transform:translateX(-50%)；三角大小由偶数border-width控制；兼容IE需避免transform，响应式慎用相对单位。
如何用 ::before 和边框画出纯 CSS 箭头
箭头不是图片，也不是 SVG，就是靠 border 的视觉错位实现的。核心是：只设一个方向的边框颜色，其余三个方向透明，且宽高为 0 —— 这时浏览器会把四条边交汇处“挤”成一个三角形。
- 必须同时设置
content: ""，否则::before不渲染 - 元素需有定位（
position: absolute或relative），不然箭头会脱离上下文流 - 常见错误：忘了设
width: 0; height: 0;，结果出现矩形块而不是三角形 - 箭头朝向由哪条边有颜色决定：
border-top-color→ 向下指；border-bottom-color→ 向上指；左右同理
气泡框 + 箭头的定位对齐怎么不偏移
箭头贴在气泡边缘但总差几像素？问题常出在定位原点和尺寸计算上。气泡本身有 padding，而箭头是绝对定位在伪元素上，它的 top/left 是相对于气泡内容区左上角算的，不是边框内侧。
- 箭头水平居中：用
left: 50%+transform: translateX(-50%)，比硬算left: calc(50% - 6px)更可靠 - 箭头垂直偏移量要包含气泡的
border-width和padding，比如气泡padding: 12px，箭头想从气泡顶部中间伸出，就设top: -12px（不是-6px） - 如果气泡用了
box-sizing: border-box，记得箭头的top/left值仍以 content box 为基准，不受影响
border 三角的大小和清晰度怎么控制
三角大小由边框宽度决定，但过大会模糊、过小会锯齿。这不是分辨率问题，是抗锯齿在斜边上的自然表现。
- 推荐边框宽度用偶数（如
6px、8px），奇数宽度（如5px）在某些缩放比例下容易出现半像素模糊 - 避免用
border-style: dashed或dotted，只支持solid - 想加阴影？不能直接给
::before加box-shadow（三角边缘会漏光），得用filter: drop-shadow() - 高 DPI 屏幕下，
1px边框可能看不见，至少用2px
兼容性与响应式要注意什么
所有现代浏览器都支持，但 IE11 及以下不支持 transform 在伪元素上生效，所以 translateX(-50%) 对齐会失效。
- IE 兼容方案：改用
left: calc(50% - 6px)（前提是三角固定宽 12px，即边框各 6px） - 响应式场景下，别用
em或rem控制三角大小 —— 它们会随字体缩放失真，统一用px - 移动端点击区域小？给气泡容器加
padding扩展可点击范围，箭头本身不响应事件，无需额外处理 - 暗色模式下，箭头颜色要随气泡背景色动态变化，建议用 CSS 自定义属性传值，比如
--bubble-bg: #fff，再让::before的border-color继承它
真正麻烦的是箭头要“避开”相邻元素又保持视觉粘连——这时候往往得微调 z-index 层级和 margin 负值，而且每个场景的数值都得实测，没法套公式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
