纯css箭头完全可行，核心是用::after创建宽高为0的元素，仅设单边有色边框、其余三边transparent，利用边框交汇形成的视觉错觉生成等腰直角三角形；必须给父容器设position:relative以确保定位准确，border-width控制大小，border-color决定方向与颜色。
纯 CSS 箭头完全可行，核心就是用 ::after 画一个宽高为 0 的元素，靠边框颜色叠加“挤”出三角形——不是真的图形，是视觉错觉，但足够稳定、无图、可缩放。
为什么 border 能画出三角形？
浏览器渲染边框时，四条边在角上交汇。当元素 width 和 height 都为 0，且只有一条边有颜色、其余三边设为 transparent，交汇点就会形成一个等腰直角三角形。
-
border-top有色 → 箭头向下指（尖端朝下） -
border-bottom有色 → 箭头向上指（尖端朝上） -
border-left有色 → 箭头向右指（尖端朝右） -
border-right有色 → 箭头向左指（尖端朝左）
关键参数：border-width 决定三角大小，border-color 控制方向和颜色；必须四边都写全，透明边也要显式声明 transparent，否则某些浏览器会 fallback 到默认色（比如黑色）。
箭头定位总偏移？检查父容器有没有 position: relative
::after 是绝对定位，它找的是**最近的已定位祖先**（即 position 值为 relative、absolute 或 fixed 的父级）。如果父容器没设 position: relative，::after 就可能相对于 偏移，导致箭头飞走。
- 务必给箭头的直接父容器加
position: relative - 避免在中间某层父元素意外加了
position: absolute，它会截断定位链 - 用浏览器 DevTools 检查
::after的 computedposition和offsetParent，确认定位基准是否符合预期
要做带边框的箭头，必须用 ::before + ::after 叠两层
单个 ::after 只能有一种 border-color，没法同时表达「背景色 + 边框色」。强行写多色 border（如 border: 1px solid #ccc; border-top-color: #333）在 Chrome/Firefox 中会被忽略，在 Safari 中可能渲染异常。
- 外层（
::before）：border-width: 6px，border-top-color: #999（边框色），其余三边transparent - 内层（
::after）：border-width: 5px，border-top-color: #fff（气泡背景色），其余三边transparent - 两者
top、left完全一致，::after不要加transform，靠像素级对齐（比如都设top: 12px; left: 50%），再用margin-left: -5px居中
任何 transform: translate() 都可能导致 subpixel 错位，尤其在 Retina 屏上露白边。
iOS Safari 点不中箭头？别指望 pointer-events: auto
::after 默认 pointer-events: none，且三角本身 width/height 是 0，实际点击热区极小。iOS Safari 对伪元素点击支持更弱，pointer-events: auto 在很多 WebKit 版本里根本无效。
- 解决方案不是改伪元素，而是扩大父容器可点击区域：比如箭头在右侧，就给父容器加
padding-right: 20px - 确保整个交互容器（比如按钮或 tooltip 区块）是
display: inline-block或display: flex，防止行内元素塌陷压缩热区 - 测试时真机连 Safari 开发者工具，用
touchstart事件打点验证热区是否覆盖到箭头位置
最易被忽略的点：箭头尺寸和容器 padding / margin 的关系。比如 border-width: 6px 的向下箭头，top 要设为 -12px（负两倍边框宽），但若容器本身有 padding-top: 8px，这个 -12px 就得相应调整，否则箭头会嵌进内容里或悬空太远。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
