::before三角形不显示的最常见原因是未设置content: ""或父容器缺少position: relative；三角形通过border实现方向与大小控制；居中需left: 50%配合transform: translateX(-50%)；移动端错乱多因overflow裁剪或兼容性缺失。
为什么::before画的三角形不显示？
最常见原因就两个：content: "" 没写，或父容器没设 position: relative。伪元素必须有 content 才会渲染，哪怕值为空字符串；而 position: absolute 的 ::before 若父级没定位上下文，就会相对于 body 定位——箭头直接“飞”到页面左上角。
务必检查这三点：
- 气泡容器加了
position: relative -
::before里写了content: "" -
::before设了position: absolute
怎么用border控制箭头方向和大小？
三角形本质是边框交汇形成的视觉错觉：把宽高设为 0，只保留一个方向的实色边框，其余三边设为 transparent，就能“挤”出对应方向的三角形。
方向口诀（以 ::before 为例）：
- 向上箭头 →
border-bottom: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 向下箭头 →
border-top: 8px solid #333; border-left: 8px solid transparent; border-right: 8px solid transparent; - 向右箭头 →
border-left: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent; - 向左箭头 →
border-right: 8px solid #333; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
边框宽度（如 8px）直接决定箭头大小；颜色由实色边框的 border-color 控制。
箭头怎么水平居中且不随内容变宽偏移？
硬写 left: 20px 或 left: 50% 都不行——前者在气泡变宽时箭头会偏离中心，后者没配合位移会导致偏左一半自身宽度。
正确做法是组合使用：
-
left: 50%把箭头左边缘移到父容器水平中点 -
transform: translateX(-50%)向左平移自身宽度的一半，实现真居中
完整定位代码示例（向下箭头）：
::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 8px solid #333;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
移动端或文字换行后箭头位置错乱怎么办？
这不是 bug，是定位逻辑没适配动态尺寸。只要用了 left: 50% + transform: translateX(-50%)，箭头就能随气泡宽度自动居中；但若气泡设置了 overflow: hidden，可能把箭头裁掉——得确保父容器留出足够空间（比如加 padding-bottom: 10px 或用 min-height 预留）。
另外注意：transform 在老版 Safari 或 Android 4.x 上需加 -webkit-transform 前缀；如果要兼容 IE10 及以下，得改用 left: calc(50% - 8px)（假设箭头底边宽 16px），但这种写法无法响应式缩放，不推荐新项目使用。
真正容易被忽略的是：箭头颜色必须和气泡背景色严格一致，否则在高缩放或 subpixel 渲染下会出现细缝；如果气泡用了渐变或阴影，单靠 ::before 很难模拟，这时该考虑 ::after 叠一层做描边或投影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
