纯CSS用::before/::after生成三角形尖角需：1.伪元素设content:""和position:absolute；2.父容器设position:relative；3.仅单边边框有色，其余transparent；4.用z-index和transform微调消除像素缝隙。
用 ::before 或 ::after 生成三角形尖角
纯 CSS 实现带尖角的提示框，核心是利用边框色叠加形成的三角形。给一个宽高为 0 的元素设置不同方向的边框（比如上、左、右），其中三边透明，剩下一侧有颜色，就能“挤”出一个指向特定方向的三角形。
常见错误是直接给提示框本体加 border，结果发现三角形位置偏移或尺寸失控——必须用伪元素独立控制，且需配合 position: absolute 精确定位。
- 尖角朝下：给
::after设border-top: 8px solid #333，其余三边设为transparent - 尖角必须脱离文档流，所以伪元素要设
content: ""+position: absolute - 父容器（提示框）需设
position: relative，否则伪元素会相对于最近定位祖先定位，容易跑偏 - 尖角默认居中对齐，若需微调水平位置，用
left或transform: translateX()更稳妥，避免因边框宽度导致计算误差
尖角与提示框之间的像素级缝隙问题
渲染时，尖角和提示框主体常出现 1px 白边或错位，本质是 subpixel 渲染 + 边框抗锯齿叠加造成的视觉断层，不是代码写错了。
最有效解法是让尖角略微“盖住”提示框边缘，即把伪元素的 z-index 设为比主体高，并反向微调坐标（例如尖角朝下时，把 top 从 100% 改成 99.5%），或用 transform: translateY(-1px) 向上拉一点。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
margin或padding去“填缝”，它们不作用于边框形成的三角形 - 如果提示框有圆角（
border-radius），尖角不能直接贴在圆角拐点上，需预留至少4px直角过渡区，否则尖角看起来像被削掉一角 - 在 Retina 屏上，
1px缝隙可能更明显，可尝试用border-width: 0.5px（部分浏览器支持）或改用clip-path替代（但兼容性略低）
响应式场景下尖角尺寸与定位的联动处理
当提示框宽度随屏幕变化时，固定 border-width: 8px 的尖角会显得过大或过小，且 left: 50% 这类定位在内容长度变化后不再居中。
解决思路不是用 JS，而是用 CSS 变量 + calc() 动态控制。把尖角大小和横向偏移绑定到提示框的 --tip-width 自定义属性上，再通过 width 和 transform 调整。
- 尖角大小建议用
em或rem，例如border-top: 0.5em solid #333，使其随字体缩放自然适配 - 水平居中更可靠的方式是：
left: 50%+transform: translateX(-50%)，这样不依赖提示框具体宽度 - 若尖角需跟随箭头指向动态切换方向（如气泡自动调整朝向），得提前写好
[data-dir="top"]::after、[data-dir="right"]::after等多套规则，用 JS 切换data-dir属性值即可
position: relative 是否落在正确父级、伪元素的 border 四边是否只有一边有色、以及 z-index 和 transform 是否已用于压合像素间隙。 
