用border做三角形指示器，必须width:0、height:0、三边transparent、单边设色；方向由设色边决定（如border-top为向下箭头），大小由该边border-width控制，常见问题多源于overflow:hidden、font-size/line-height干扰或未设display:block。
直接说结论：用 border 做三角形指示器，必须让元素 width: 0、height: 0，三边 transparent，仅留单边设色；方向由“哪条边有颜色”决定，不是“朝哪画”，而是“哪边留色”。
为什么三角形总偏移、发虚或根本看不见
这不是代码写错了，而是上下文在“暗中破坏”：
- 父容器设置了
overflow: hidden—— 直接把 border 渲染区域裁掉，三角消失 -
font-size或line-height太大（哪怕只设了16px），会让inline元素被文字基线撑开，宽高为 0 的元素实际占位不为 0，三角塌成梯形 - 没加
display: block或display: inline-block，元素默认是inline，受基线对齐影响，“吊着”不居中 - 用了
transform: scale()的祖先元素，部分浏览器会重算border-width，导致三角位置漂移 - 调试时临时加一句
outline: 1px dashed red，能立刻看清真实边界，比猜快十倍
怎么精准控制方向和大小（含常见方向速查）
方向只取决于哪条边设了实色，大小只由该边的 border-width 决定。其他三边宽度必须相等（不能为 0），否则交汇点消失，三角不成立。
- 向下箭头 →
border-top: 8px solid #333，其余三边transparent - 向上箭头 →
border-bottom: 8px solid #333，其余三边transparent - 向右箭头 →
border-left: 8px solid #333，其余三边transparent - 向左箭头 →
border-right: 8px solid #333，其余三边transparent
想更尖锐？把三边 border-width 都设小一点（比如全设 6px），但别设成 0；要等腰直角？四边 border-width 必须严格相等。
用在下拉菜单/tooltip 时最容易踩的坑
伪元素方案最稳妥，但定位和响应式细节一错就露馅：
- 务必给父容器加
position: relative，否则::after会相对 body 定位 - 用
top: 50%+transform: translateY(-50%)垂直居中，别依赖margin-top硬调——字体缩放或行高变化时会偏移 -
border-width必须用px，禁用em或rem；它们随font-size缩放，三角比例会失真 - 如果父容器是
flex，确保伪元素没被flex-shrink: 0意外压缩（加flex-shrink: 0显式锁定） - 亚像素渲染问题：当
border-width是小数（如9.5px），非 Retina 屏会出现边缘发虚或白边——一律用整数px
真正难的不是画出三角，而是让它在各种父容器、缩放、字体设置下都稳住位置和形状。很多问题不是 CSS 不懂，是它被别的样式悄悄改写了。调试时先关掉所有可能干扰的样式，再逐个打开验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
