最轻量做法是用::after伪元素配合border属性绘制小三角。关键点：仅设置单向实色边框，其余为transparent；父元素需设position:relative以确保精确定位；可灵活切换方向、颜色及适配hover/active状态；兼容IE9+，纯装饰性无需ARIA。
直接用 ::after 伪元素在当前导航项（比如加了 active 类的
基础实现：用 border 画三角
三角本质是用 css 边框的斜角特性“挤”出来的。关键点是只设一个方向的边框，其余为 transparent：
- 下三角：上边框实色，左右下边框透明
- 上三角：下边框实色，左右上边框透明
- 右三角：左边框实色，上下右边框透明
例如，导航项底部居中显示向下的小三角：
.nav-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #333; /* 指向下的三角 */ }定位要配合父容器的相对定位
::after 默认是相对自身定位，但要精确定位（比如居中、贴底），父元素必须设 position: relative，否则 absolute 会往上层找最近的定位祖先，容易错位：
立即学习“前端免费学习笔记（深入）”；
.nav-item { position: relative; }适配不同状态和方向
可按需切换方向或颜色。比如悬停时也显示、或当前项用蓝色三角：
- 改成
.nav-item:hover::after, .nav-item.active::after实现 hover + active 共享样式 - 把
border-top换成border-bottom就变成朝上的三角（适合顶部菜单高亮） - 加
margin-top: 4px可微调垂直间距，避免紧贴文字
注意兼容性和可访问性
这个方法兼容所有现代浏览器，包括 IE9+。如果导航用语义化结构（如
），无需额外 ARIA 属性——三角纯属装饰，不影响屏幕阅读器理解当前状态。但确保 active 类本身已通过 js 或服务端正确设置，否则视觉指示就失效了。
基本上就这些。不复杂但容易忽略定位上下文和 border 方向逻辑。