如何用纯HTML/CSS实现带箭头的Div/Li格式面包屑？

嘿，我来分享一个完全用HTML和CSS实现带箭头面包屑的方案，不用任何JS或图片，灵活度还很高，适配大部分场景！

第一步：HTML结构 #

我们用语义化的nav标签包裹无序列表ul，每个列表项li对应面包屑的一级导航，最后一项是当前页面（不需要链接）：

<nav class="breadcrumb">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品分类</a></li>
    <li><a href="#">数码产品</a></li>
    <li>智能手机详情页</li>
  </ul>
</nav>

第二步：CSS样式实现核心效果 #

核心思路是用CSS伪元素+边框特性生成箭头，完全替代图片：

/* 重置列表默认样式 */
.breadcrumb ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  /* 让列表项横向排列 */
  display: flex;
  gap: 0; /* 消除默认间隙 */
}

/* 基础列表项样式 */
.breadcrumb li {
  position: relative;
  padding: 0.6rem 1.2rem 0.6rem 2rem;
  background-color: #f5f5f5;
  color: #333;
  font-size: 0.9rem;
}

/* 给非最后一项添加右侧箭头 */
.breadcrumb li:not(:last-child):after {
  content: "";
  position: absolute;
  top: 0;
  right: -1rem; /* 让箭头刚好衔接下一个列表项 */
  /* 利用边框生成三角形箭头 */
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid #f5f5f5;
}

/* 第一个列表项不需要左侧padding */
.breadcrumb li:first-child {
  padding-left: 1.2rem;
  border-radius: 4px 0 0 4px; /* 左上角和左下角圆角 */
}

/* 当前页面样式区分 */
.breadcrumb li:last-child {
  background-color: #e0e0e0;
  border-radius: 0 4px 4px 0; /* 右上角和右下角圆角 */
}

/* 链接样式 */
.breadcrumb li a {
  color: #2196f3;
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/* hover时的背景色和箭头同步变化 */
.breadcrumb li:not(:last-child):hover {
  background-color: #e8f0fe;
}

.breadcrumb li:not(:last-child):hover:after {
  border-left-color: #e8f0fe;
}

关键细节说明 #

• 箭头生成原理：通过设置三个方向的边框为透明，一个方向为背景色，利用CSS边框的梯形特性生成三角形箭头，完全不需要图片；
• 布局方式：用flex实现横向排列，比传统的float更简洁易维护；
• 自定义调整：可以通过修改border的宽度调整箭头大小，修改padding控制面包屑的高度和内边距，替换颜色值适配你的网站风格；
• 兼容性：这种方案兼容所有现代浏览器，甚至IE9及以上也能正常显示。

内容的提问来源于stack exchange，提问作者Renan Cuoghi