气泡尖角优先用::after，留::before作背景或边框；尖角是透明border构成的旋转正方形，需重置三边为transparent；定位用left/right+transform translateY(-50%)实现自适应居中。
气泡尖角用 ::before 还是 ::after？
两者都能用，选哪个取决于你是否需要保留一个伪元素做其他用途（比如遮罩、阴影层）。多数人用 ::after 画尖角，留 ::before 做背景渐变或边框叠加——这样后续加描边、投影或动画时更灵活。
尖角本质是旋转的正方形，关键不是“三角形”，而是用 border 配合透明色做出指向效果。常见错误是直接写 border-top: 10px solid #333，结果尖角位置偏移、边缘模糊——因为没重置 border-color 的其他三边。
- 尖角尺寸由
width/height控制，推荐统一设为8px（小屏适配友好） - 必须设
content: ""，否则伪元素不渲染 - 定位用
absolute，父容器记得加position: relative - 尖角方向靠
border单边色 + 其余三边透明实现，例如右向尖角：border-left: 8px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
transform: translate() 调整尖角位置时为什么总偏一点？
因为 translate() 是基于元素自身左上角计算的，而尖角伪元素的“视觉中心”不在原点。比如右向尖角，它的左侧边界才是逻辑起点，translateX(100%) 会把它整个推到容器外。
正确做法是先用 left: 100% 把尖角左边缘对齐容器右边缘，再用 transform: translateY(-50%) 垂直居中——这样无论气泡高度怎么变，尖角始终垂直居中。
立即学习“前端免费学习笔记（深入）”；
- 水平方向：用
left/right定位基准边，再用transform: translateX()微调（如translateX(-4px)补偿边框宽度） - 垂直方向：一律用
top: 50%+transform: translateY(-50%)，避免依赖固定像素值 - 别用
margin调位置，响应式下容易错位
圆角气泡里文字换行后，尖角还对得准吗？
只要尖角伪元素绑定的是气泡容器（而不是文字元素），就完全不受文字换行影响。但很多人把尖角挂到了 <span></span> 或 <p></p> 上，导致文字撑高后尖角悬空。
真正稳定的结构是：外层 div 同时承载气泡样式和尖角伪元素，内部文字用纯语义标签（p、span）不参与布局控制。
- 气泡容器最小宽高建议设
min-width: 60px、min-height: 32px，防止极短文字塌缩 - 文字用
word-break: break-word或overflow-wrap: break-word，避免长单词撑破气泡 - 尖角的
top值别写死，改用top: calc(50% - 4px)（假设尖角高 8px），随气泡高度自适应
深色模式下气泡背景和尖角颜色怎么同步切换？
别用 JS 切换 class，直接用 @media (prefers-color-scheme: dark) 覆盖变量值。尖角颜色必须和气泡背景严格一致，否则会出现 1px 白边或黑边——这是 antialiasing 导致的亚像素渲染残留，不是 bug。
最简方案是定义 CSS 变量：--bubble-bg: #fff 和 --bubble-arrow-bg: var(--bubble-bg)，在媒体查询里一起改。
- 避免用
filter: invert()处理尖角，会导致边缘发虚 - 如果用了 box-shadow，深色模式下要同时调暗阴影色，否则显得过重
- 尖角的
z-index必须低于气泡主体，否则在某些浏览器里会遮挡气泡圆角
尖角和背景色同步、定位锚点选对容器、伪元素不依赖文字盒——这三点漏掉任意一个，气泡就会在不同设备或内容长度下错位。
