用::after画小三角的关键是：宽高为0，仅一边设实色边框、其余三边transparent，利用边框交汇斜角形成等腰直角三角形；需配合content:""、position:absolute及父容器relative定位。
用 ::after 画小三角，关键在 border 技巧
纯 CSS 小三角箭头不靠图片、不靠 SVG，核心就是利用元素的边框交汇点——把宽高设为 0，只给某一边框设颜色和宽度，其余三边透明，就能挤出一个三角形。::after 正好适合做这个“附加图形”，不影响主内容流。
常见错误是直接写 border: 10px solid red，结果出来是个实心方块；必须确保另外三边是 transparent 或 none，且元素本身 width 和 height 都为 0。
- 方向由哪条边有颜色决定：上三角 →
border-bottom有色，其余透明 - 大小由边框宽度控制，比如
border-bottom: 8px solid #333就是高约 8px 的等腰三角 - 定位要用
position: absolute，父容器得是position: relative
气泡框 + 箭头的完整结构怎么搭
气泡本身通常是一个带圆角、背景色、内边距的 div，箭头用 ::after 挂在它后面。两者共用同一个定位上下文，避免错位。
典型 HTML 结构：
<div class="tooltip">提示文字</div>对应 CSS 要这样写：
立即学习“前端免费学习笔记（深入）”；
- 给
.tooltip设position: relative，作为定位根 -
.tooltip::after设content: ""（伪元素必须有 content 才渲染）、position: absolute - 用
top/left把箭头挪到气泡边缘，比如右下角箭头：设bottom: -8px、left: 20px - 别忘了加
z-index，确保箭头压在气泡上（有时会被父层遮住）
不同方向的三角箭头怎么写（含常用参数）
方向切换本质就是换哪条边有颜色 + 调整定位偏移。下面列几个高频场景的 ::after 写法（假设气泡宽高已定，箭头大小统一为 6px）：
- 向下箭头（气泡在上，箭头指下方）：
border-top: 6px solid #333; border-right: 6px solid transparent; border-bottom: 0; border-left: 6px solid transparent;，配合top: 100%; left: 50%; transform: translateX(-50%); - 向右箭头（气泡在左）：
border-left: 6px solid #333; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 0;，配合top: 50%; right: -6px; transform: translateY(-50%); - 向上箭头（气泡在下）：
border-bottom: 6px solid #333;其余三边透明，配合bottom: 100%; left: 50%; transform: translateX(-50%);
注意：用 transform 居中比硬算 left: calc(50% - 6px) 更可靠，尤其当气泡宽度不固定时。
容易被忽略的兼容性和细节问题
看似简单，但上线后常出问题的地方集中在三点：IE 对 transform 的支持、伪元素层级错乱、移动端点击区域误判。
- IE10+ 支持
::after，但 IE9 只认:after（单冒号），如果需兼容，建议双写：:after, ::after - 箭头默认没有点击事件，如果气泡要响应点击，得给
::after加pointer-events: none，否则会挡住下层元素 - 高 DPI 屏幕下，6px 边框可能显得模糊，可改用
border-width: 0.375rem配合font-size: 16px提升缩放鲁棒性 - 不要给
::after设display: block—— 它默认就是 inline-level，设了反而可能破坏垂直对齐
真正难的不是画出三角，而是让三角始终粘在气泡边缘、不随字体缩放抖动、不遮挡交互、在各种屏幕下都清晰——这些细节堆起来，才算是稳。
