伪元素没显示需先检查三件事：父容器是否设position: relative、伪元素是否有content: ""、是否设position: absolute；漏一即失效。
伪元素没显示？先检查这三件事
最常见的“画不出来”根本不是代码写错，而是基础条件缺失。伪元素 ::before 或 ::after 不是自动渲染的，必须同时满足：父容器有 position: relative、伪元素本身有 content: ""、伪元素设了 position: absolute。漏掉任一条件，箭头就消失或飞到页面左上角。
容易踩的坑包括：content: " "（带空格）不生效；border-style 没显式写 solid（默认是 none，再大的 border-width 也画不出三角）；父容器用了 display: flex 但忘了加 position: relative，导致定位基准异常。
三角方向总搞反？记住 border-color 的朝向逻辑
箭头指向哪边，取决于哪条边有颜色，而不是“贴在哪边”。例如：想让箭头贴在气泡右侧并朝右，就得用 border-left-color；想贴在左侧并朝左，就得用 border-right-color。这不是直觉，是边框交汇点的物理结果。
四个标准组合必须记牢：
立即学习“前端免费学习笔记（深入）”；
- 向上箭头：
border-bottom-color: #000，其余三边transparent - 向下箭头：
border-top-color: #000，其余三边transparent - 向右箭头：
border-left-color: #000，其余三边transparent - 向左箭头：
border-right-color: #000，其余三边transparent
border-width 同时决定三角高度和底边宽度（如 6px → 高约 6px，底边宽约 12px）。单位统一用 px，避免 em 或 rem 在缩放时失准。
箭头对不齐、飘在半空？别硬调 top/left
写死 top: 12px 或 left: 20px 是最不稳定的方案——气泡内边距变、字体大小变、行数变，箭头立刻脱钩。正确做法是用 transform 锚定中心点：
- 垂直居中统一用：
top: 50%+transform: translateY(-50%) - 水平居中统一用：
left: 50%+transform: translateX(-50%) - 尖端贴右边缘（右侧气泡）：
right: -6px（负值等于border-width）+top: 50%+transform: translateY(-50%)
注意：如果气泡有 border-radius，箭头根部可能和圆角打架，这时要微调 top 值（比如 top: calc(50% + 2px)），把箭头往下压一点避开弧度区域。
圆角尖角、高倍屏糊、背景露底？border 方案有硬伤
纯 border 画出的三角是直角、实心、无抗锯齿的。在 Retina 屏上，border-width: 1px 几乎不可见，2px 容易发虚，推荐起步值为 6px。更关键的是：如果气泡背景是渐变或图片，三角边缘会直接透出底层色——因为它是靠透明边框“挤”出来的空心结构。
遇到这些情况，就得换方案：
- 要圆角尖角：改用
radial-gradient，例如background-image: radial-gradient(farthest-side at bottom right, transparent 100%, #000 calc(100% + 1px)) - 要 SVG 级精度或复杂轮廓：用
clip-path: path()（但 IE 不支持） - 要兼容老浏览器且接受直角：确保父容器
overflow: visible，否则overflow: hidden会把伸出容器外的三角裁掉
真正难的从来不是“怎么画出三角”，而是“怎么让它在各种尺寸、缩放、背景、圆角条件下都稳稳贴住气泡边缘”。每一步定位都要考虑它和父容器的几何关系，而不是孤立地调一个 top 值。
