用.tooltip__arrow独立元素配合::before和::after双伪元素生成三角尖角，通过统一border-width、方向对应实色边（如border-top向下）、left:50%+transform精确定位，并实现描边填充以提升清晰度，确保BEM结构清晰、样式解耦、多场景稳定。
如何用 .tooltip__arrow 定义三角形尖角
直接用 ::before 或 ::after 生成三角，但 BEM 要求结构清晰、可复用，所以尖角必须抽成独立 Element，而不是混在 .tooltip__content 里写死样式。
关键不是“能不能做”，而是“改方向/颜色/大小时要不要动主内容样式”。把尖角作为 .tooltip__arrow 单独声明，就能做到只改箭头不碰气泡体。
-
.tooltip__arrow必须设content: ""，否则伪元素不渲染 - 定位依赖
.tooltip设position: relative，否则absolute会脱出上下文 - 三角尺寸靠
border-width控制，比如border-top: 8px solid #fff配合透明左右边，就形成向下的实心尖角 - 若要微调尖角水平位置，优先用
left: 50%+transform: translateX(-50%)，避免因父容器 padding 或字体影响偏移
.tooltip__arrow--top 和 .tooltip__arrow--right 的 border 写法差异
不同方向的尖角，本质是哪条边设为实色、其余设为 transparent。写错顺序或漏掉某条边，三角就“塌”了或者方向反了。
- 向上尖角（
.tooltip__arrow--top）：border-bottom: 8px solid #fff，其余三边 transparent - 向下尖角（
.tooltip__arrow--bottom）：border-top: 8px solid #fff - 向左尖角：
border-right: 8px solid #fff，且需配合right: 100%+top: 50%+transform: translateY(-50%) - 向右尖角：
border-left: 8px solid #fff，left: 100%同理
注意：所有方向都必须统一 border-width 值，否则和气泡圆角对不齐；如果气泡用了 border-radius: 6px，尖角建议也用 6px 或 8px，视觉更协调。
立即学习“前端免费学习笔记（深入）”；
为什么 .tooltip__arrow 要配两个伪元素（::before 和 ::after）
单层边框三角在高对比场景下边缘发虚，尤其在 retina 屏或缩放 125% 时明显。双层是为了模拟「描边+填充」效果：外层是边框色（如 #ccc），内层是背景色（如 #fff），形成干净锐利的尖角。
-
.tooltip__arrow::before：画外轮廓，border-color: #ccc transparent transparent transparent -
.tooltip__arrow::after：叠在上面，border-color: #fff transparent transparent transparent，且border-width小 1px - 两者共用相同定位，仅靠
z-index或 DOM 顺序控制叠放，不需要额外 HTML 元素
这种写法兼容所有现代浏览器，包括 Safari 15.4+ 和 Edge 103+，但 IE11 不支持 transform 在伪元素上生效，若需兼容，得降级用 margin-left 替代 transform。
BEM 下修改尖角位置时最容易忽略的点
很多人改 left 或 top 值后发现尖角飘了，其实问题不在坐标，而在 .tooltip 自身有没有触发 BFC 或被其他样式干扰。
- 如果
.tooltip是 inline 元素（如span），position: relative仍可能受父行高影响，建议显式加display: inline-block - 若尖角出现在滚动容器内，且容器有
transform: translateZ(0)或will-change: transform，某些 Chrome 版本会破坏伪元素定位，临时解法是给.tooltip加contain: layout paint - 移动端 hover 不触发，
.tooltip:hover .tooltip__arrow::before会失效，必须改用:focus-within或 JS 切换.tooltip--active类
真正麻烦的不是画出三角，而是让它在各种嵌套、缩放、焦点、动画场景下始终咬准气泡边缘 —— 这才是 BEM 把它拆成独立 Element 的真实原因。
