使用 CSS 三角形制作面包屑导航

您知道可以使用纯 CSS 制作三角形吗？这非常简单。 您只需创建一个宽度和高度为零的块级元素，在其一侧设置彩色边框，并在相邻的两侧设置透明边框。它们可以用于各种用途，例如从气泡中伸出的箭头、导航指针等等。通常，这些只是视觉修饰，不值得使用专门的标记。幸运的是，伪元素通常非常适合这种情况。也就是说，使用::before、::after或两者来创建这些块级元素并放置三角形。这种方法的一个巧妙用途是：面包屑导航。

HTML 标记

让我们尽可能保持简洁，并使用一个简单的无序列表，并添加一个“breadcrumb”类。

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Vehicles</a></li>
  <li><a href="#">Vans</a></li>
  <li><a href="#">Camper Vans</a></li>
  <li><a href="#">1989 VW Westfalia Vanagon</a></li>
</ul>

CSS

首先，我们将确保我们的列表看起来不像一个典型的列表。我们将删除默认的列表样式，将项目浮动到左侧，并为每个链接设置非常基本的样式。请注意列表本身隐藏的溢出，这将有两个用途。第一，它确保菜单具有高度。仅包含浮动元素的容器会折叠，这通常不是理想的。第二，当我们制作三角形时，我们将使它们很大。

.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font: 18px Sans-Serif;
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 65px;
  background: brown; /* fallback color */
  background: hsla(34,85%,35%,1); 
  position: relative; 
  display: block;
  float: left;
}

要创建三角形，我们将使用::after选择器来创建一个伪元素。它将是块级元素，高度和宽度为零，并绝对定位到左侧的 100%，这意味着它将从其父元素的右边缘开始。我们将它从顶部定位 50%，并使用边距将其向上拉 -50px，这将确保它绝对居中。这是一个经典技巧。还需要注意其他一些事项。我们将使用的边框在顶部为 50px，底部为 50px，左侧（制作向右的箭头）仅为 30px。这意味着一个更扁平的箭头。如果我们超过 50px，它将更尖锐。等于 50px 将使其成为完美的 90 度。由于顶部和底部的边框各为 50px，因此箭头的总高度为 100px。100px 远高于我们的菜单在 18px 字体大小和 10px 上下填充的情况下可能具有的高度。这是一件好事。这意味着我们有足够的空间来调整字体大小，而不用担心三角形会显示其限制。

.breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(34,85%,35%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

注意到那个细小的 1px 白色分隔线了吗？这是另一个小技巧。我们不能直接在三角形上添加边框，因为它本身就是由边框构成的！相反，我们将创建另一个三角形，并将其放置在我们原始三角形的后面，并将其颜色设置为白色。这个三角形使用::before选择器，但在其他方面完全相同。请注意，这里的关键是 z-index。您可以交换哪个三角形使用::after和哪个三角形使用::before，这实际上并不重要。

.breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}

现在开始着色。由于我们在这里稍微使用了一些高级技巧，因此我认为有两个 CSS 部分非常适合这个想法：nth-child 和 HSLa。

• nth-child 的优点：我们可以为面包屑的不同级别着色，而无需任何额外的标记。
• HSLa 的优点：我们可以基于单个色调和不同的阴影轻松地为面包屑的不同级别着色。

除了着色之外，我们还将使第一个链接具有较少的左侧填充（单个三角形不需要那么多填充，因为它没有与它紧贴在一起），并且我们将使最后一个链接没有任何着色，并且也不会响应点击或显示指针光标。我们也可以在不使用任何额外标记的情况下通过:first-child和:last-child实现这些效果。

.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
  background: transparent !important;
  color: black;
  pointer-events: none;
  cursor: default;
}
.breadcrumb li:last-child a::after { 
  border: 0; 
}

最后是悬停状态。这里唯一的技巧是，我们需要为三角形和链接都着色。没什么大不了的。

.breadcrumb li a:hover { 
  background: hsla(34, 85%, 25%, 1); 
}
.breadcrumb li a:hover:after { 
  border-left-color: hsla(34, 85%, 25%, 1) !important; 
}

更深入的浏览器兼容性

叫我懒惰鬼也行，但我没有费心处理非常深入的浏览器兼容性问题。我更兴奋于这个想法本身，而不是考虑生产环境。如果您想使用这个想法，但又担心旧版浏览器，以下是一些需要考虑的事项。

• 不要使用hsla()进行着色，请使用十六进制颜色代码。
• 不要使用:nth-child进行着色，请为每个列表项指定一个类名。
• 对于不支持::after/::before的浏览器，请使用基于图像的系统。这是我最喜欢的基于图像的面包屑教程。
• 使用 Modernizr 检测功能（如 HSLa）。
• 使用 IE 专用样式表。

尽情享受

这是我们介绍的示例，以及一些变体。

查看 CSS-Tricks 的 CodePen 作品 CSS 三角形面包屑（@css-tricks）在 CodePen 上。