用 border 画小三角是最直接、兼容性最好的方式，原理是通过设置无宽高元素的四边框颜色与透明度来“挤”出三角形，需指定 border-style: solid 且 border-width 建议不小于 6px。
用 border 画小三角是最直接、兼容性最好的方式
纯 CSS 气泡提示框的小三角，95% 的场景下直接用 border 就够了，不需要 SVG 或伪元素叠加渐变。原理很简单：把一个无宽高的元素（比如 width: 0; height: 0）的四边框设成不同颜色或透明，其中三边透明、一边有色，就能“挤”出一个三角形。
常见错误是忘记设置 border-style: solid —— 默认 border-style 是 none，不写就画不出三角；还有人误设 border-width 太小（如 1px），导致在高倍屏上糊成一团，建议至少用 6px 起步。
示例（向上指的三角）：
.tooltip-arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
border-bottom设为实色，其余两边设为transparent，三角就朝上 - 方向由哪条边有颜色决定：想朝右？那就设
border-left为实色，左右/下设透明 - 三角大小由
border-width值统一控制，不要混用不同值（比如左 6px、下 8px），否则不是等腰三角
用伪元素 ::before 或 ::after 定位更可控
单独写一个 <span class="tooltip-arrow"></span> 虽然可行，但语义弱、DOM 冗余。更主流的做法是用 ::after 在提示框元素内部生成三角，再用 position: absolute 精确定位。
典型结构是：外层 .tooltip 设 position: relative，里面 .tooltip::after 绝对定位到边缘。
容易踩的坑：
- 忘了给父容器加
position: relative，导致::after相对于 body 定位，飘走 - 用
top: 100%+left: 20px定位时，没考虑三角自身的宽高——其实应该用transform: translateX(-50%)居中，而不是硬算像素 - 没加
content: ""，伪元素不会渲染（这是最常被忽略的一行）
需要阴影或圆角时，clip-path 不是首选
有人试过用 clip-path: polygon(...) 切三角，虽然能做出带阴影或抗锯齿的效果，但兼容性差（IE 完全不支持，iOS Safari 旧版本也有问题），且阴影无法自然溢出容器（overflow: hidden 会裁掉）。
真正要加阴影，推荐两层伪元素：::before 画深色大三角当阴影，::after 画浅色小三角盖在上面；圆角则靠 filter: blur(0.5px) 微调（仅作视觉柔化，非真实圆角）。
性能提醒：
-
clip-path在滚动或动画中容易触发重绘，比border方案卡顿明显 - 如果气泡要跟随鼠标移动（tooltip 跟随模式），坚持用
border+ 伪元素，别引入clip-path或transform: rotate()
移动端适配要注意三角尺寸和点击热区
在 iPhone 上，6px 宽的三角可能显得太小，用户误触率高；但放大到 12px 又可能撑开布局。稳妥做法是用 rem 或 em 单位，并配合媒体查询微调：
@media (min-width: 768px) {
.tooltip-arrow { border-width: 8px; }
}
@media (max-width: 480px) {
.tooltip-arrow { border-width: 5px; }
}
更重要的是：小三角本身不能是唯一点击目标。很多团队把 tooltip 触发逻辑绑在三角 DOM 上，结果用户点三角反而关闭提示——正确做法是确保整个提示框区域（含三角）都响应交互，三角只是视觉元素，不是交互节点。
三角的 z-index 也容易被忽略：它必须比提示框背景层高，但又不能盖住箭头指向的目标元素，否则遮挡内容。一般设为 z-index: 1（背景层为 0，目标元素为 auto）就够用。
