最可靠纯css对话框箭头方案是用border+::after：父容器设position:relative，伪元素宽高0，仅保留单边有色边框，其余transparent；方向口诀“箭头指向哪，就动对面边”——朝上设border-bottom-color，朝下设border-top-color，朝右设border-left-color，朝左设border-right-color；大小用px，定位用负偏移+transform居中；带边框时需双伪元素模拟内外箭头。
用 border + ::after 生成三角形箭头最可靠
纯 CSS 实现对话框箭头，border 配合伪元素是当前最轻量、兼容性最好、也最容易调试的方案。不用额外 DOM，不依赖 JS，所有样式都可控。
核心原理：一个 width: 0; height: 0; 的元素，四条边框在中心交汇；只保留一条边有颜色，其余三边设为 transparent，就能得到单向三角形。
实际写法必须用 ::after 或 ::before，且父容器要加 position: relative，否则箭头无法精确定位。
- 箭头朝下 → 设
border-top-color，其余三边transparent - 箭头朝右 → 设
border-left-color，其余三边transparent - 箭头朝上 → 设
border-bottom-color，其余三边transparent - 箭头朝左 → 设
border-right-color，其余三边transparent
border-width 直接决定三角形大小和位置偏移
三角形的高 ≈ border-width 值，底边宽 ≈ 2 × border-width（等腰时）。所以别用 em 或 %，统一用 px，避免缩放或字体变化时失准。
定位时，负偏移值通常等于 border-width。例如箭头贴右侧边缘，right: -6px 比 right: 0 更稳——因为箭头本身从右边框起点向外延伸了 6px。
- 想让箭头尖端垂直居中：用
top: 50%; transform: translateY(-50%)，别写死top: 12px - 箭头贴右边缘且居中：
right: -6px; top: 50%; transform: translateY(-50%) - 若对话框有
border-radius，箭头根部可能被圆角“切掉”，此时微调top: calc(50% + 2px)往下压一点即可
对话框有边框时，得用双伪元素模拟内外箭头
如果对话框本身带实线边框（比如 border: 1px solid #ccc），单个三角形会漏出内层背景色，看起来像断开的。这时必须用两层伪元素：
-
::before：画外层箭头，颜色 = 对话框边框色，border-width略大（如 7px） -
::after：画内层箭头，颜色 = 对话框背景色，border-width小 1px（如 6px），并用transform: translate(1px, 1px)微调对齐 - 两个伪元素都用相同定位方式（比如都靠右），确保视觉叠在一起
漏掉这一步，上线后在高清屏或缩放页面下，箭头边缘大概率出现 1px 白边或错位。
箭头方向总反？记住口诀：“箭头指向哪，就动对面那条边”
这不是直觉问题，是边框交汇物理结果。很多人写 border-right-color 想让箭头朝右，结果朝左——因为 border-right 是从右往左“长”的，真正决定朝向的是它对面的边（即左边框交汇点）。
正确对应关系：
- 箭头朝上 → 动
border-bottom-color - 箭头朝下 → 动
border-top-color - 箭头朝右 → 动
border-left-color - 箭头朝左 → 动
border-right-color
记混了就画个草图：想象四条边框从中心点向外发散，有颜色的那条边，它的“对面顶点”就是箭头尖端所在方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
