CSS导航当前项加三角标记技巧

基础实现：用 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+。如果导航用语义化结构（如