纯css三角形通过设置宽高为0的元素仅一条边框有色、其余透明实现，::after伪元素常用于弹出菜单箭头，需父容器设position:relative以精确定位。
三角形箭头的 ::after 实现原理
纯 CSS 三角形本质是利用边框颜色叠加形成的视觉错觉：把一个元素的宽高设为 0，只给某一边框设颜色，其余三边透明或无色，就能“挤”出一个三角形。弹出菜单的箭头通常用 ::after 伪元素实现，因为它不占 DOM、便于定位，且可独立控制层级和动画。
关键点在于：border-width 决定三角大小，border-color 控制方向和颜色，position: absolute 配合 top/left 精确定位。别忘了给父容器设 position: relative，否则 ::after 会相对于最近的定位祖先偏移，容易跑位。
菜单顶部箭头（指向下方）的典型写法
这是最常见场景——下拉菜单上方带小三角，指示它从哪展开。箭头需居中、紧贴菜单上边缘，且不能遮挡内容。
- 给菜单容器加
position: relative -
::after设content: ""、position: absolute - 用
border-top: 6px solid #333+border-left: 6px solid transparent+border-right: 6px solid transparent生成向下指的三角 - 通过
top: -12px（即负的 border-width × 2）上移，再用left: 50%+transform: translateX(-50%)水平居中
.menu {
position: relative;
}
.menu::after {
content: "";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
不同方向箭头的 border 配置速查
方向变化只取决于哪条边框有颜色、哪几条透明。记住口诀：“有颜色的边，就是三角尖端所指的方向”。其他三边必须全透明，否则形状会歪。
- 向上指：
border-bottom: 6px solid #333，其余三边transparent - 向右指：
border-left: 6px solid #333，其余三边transparent - 向左指：
border-right: 6px solid #333，其余三边transparent - 斜角箭头（如右上）需要组合两个
::after或用clip-path，border方案不适用
容易被忽略的兼容性与层级问题
IE9+ 支持 ::after，但老版本 Safari 对 transform 的 translateX 有渲染延迟；更麻烦的是 z-index —— 如果菜单本身用了 z-index，::after 默认继承父级堆叠上下文，但若父容器没设 position，它可能被其他绝对定位元素盖住。
- 确保菜单容器有
position: relative且明确设z-index -
::after自身也加z-index: 1（比菜单内容层低，但比背景高） - 箭头颜色随主题变时，别只改
border-color，还要同步检查background和文字色对比度 - 响应式缩放时，
border-width建议用px而非em，避免在小屏下失真
三角形看着简单，但位置偏移一像素、边框颜色漏设一条、或者父容器忘了 position，箭头就消失或错位——这些细节比写法本身更常导致失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
