纯css实现带箭头提示框的核心是用border造三角、::before/::after做箭头、position: absolute精准定位；需设width/height为0，按方向设置border-color，用transform: translatex(-50%)居中，currentcolor继承颜色，z-index和overflow需协调防遮挡。
纯 CSS 实现带箭头的提示框，核心就是用 border 造三角、用 ::after 或 ::before 做箭头、靠 position: absolute 精准贴边——不依赖图片、字体图标或 SVG，兼容性好且体积零开销。
为什么用 border 画箭头？
浏览器渲染边框时，四条边在角上交汇形成斜线；当元素宽高为 0，只保留单边有颜色、其余三边设为 transparent，就能自然“挤出”一个三角形。这是最轻量、最可控的方式。
- 必须设
width: 0; height: 0;，否则边框交点被内容撑开，三角变形 -
border-color顺序是上 → 右 → 下 → 左，比如border-color: transparent transparent #333 transparent表示向下箭头 - IE6 不支持
transparent，若需兼容，得改用border-style: dashed+ 颜色 hack（现在基本可忽略） - 箭头大小由
border-width决定，比如border-width: 6px对应约 12px 宽的等腰三角底边
伪元素箭头怎么定位才不偏移？
箭头必须紧贴提示框边缘，且居中对齐——这依赖父容器的 position: relative 和伪元素的 transform: translateX(-50%)。
- 父元素（如
.tooltip）必须加position: relative，否则absolute会相对于 body 定位 - 伪元素设
left: 50%+transform: translateX(-50%)，比硬写left: Xpx更鲁棒（避免因字体、缩放导致偏移） - 向上箭头放在提示框顶部时，伪元素的
top: -6px要略小于border-width（比如border-width: 6px→top: -5px），否则出现 1px 缝隙 - 若提示框有圆角（
border-radius），箭头尖端要避开圆角区域，否则视觉断裂
不同方向箭头的 border-color 写法
方向决定哪一边的 border 有色，其余三边全透明。记住口诀：“有色边即箭头所指方向”。
- ↑ 上箭头：
border-color: #333 transparent transparent transparent（上边有色） - ↓ 下箭头：
border-color: transparent transparent #333 transparent（下边有色） - ← 左箭头：
border-color: transparent transparent transparent #333（左边有色） - → 右箭头：
border-color: transparent #333 transparent transparent（右边有色） - 颜色用
currentColor最省心，自动继承父文本色，无需额外声明
容易被忽略的层叠与遮挡问题
箭头和提示框本体是两个独立块级元素，z-index 控制不当就会被盖住或错位。
- 提示框本体设
z-index: 10，箭头伪元素默认同层，但若提示框有overflow: hidden，箭头会被裁掉——必须移出容器或取消 overflow - 箭头伪元素本身不能设
z-index（除非设了position），且它永远在父元素内容层之上、背景层之下 - 如果提示框带阴影（
box-shadow），箭头不会被阴影覆盖，但若用filter: drop-shadow()，可能意外裁剪箭头 - 移动端高 DPR 屏幕下，
border-width: 1px可能糊成 2px，建议最小用2px起步
真正麻烦的不是画出箭头，而是让箭头在各种缩放、字体变化、动态宽度场景下始终严丝合缝地咬住提示框边缘——transform: translateX(-50%) 和 currentColor 是少有的能扛住这些变量的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
