使用CSS和CSS3遍布近年来级数，我们已经达到的地步，许多涉及背景图像的旧编码技术，现在可以完全用CSS创建一个点。在本教程中，我们将看看，而不需要先前流行的“滑动门背景图像”的方法在一个平面的设计风格创造了一系列面包屑导航链接。
CSS的面包屑链接
面包屑链接，我们将创建样式都与雪佛龙的形状，以支持向下钻取内容的想法。此前背景PNG图像将被用来创建这个字形，但聪明的边界技术的帮助下同样的效果完全可以用CSS来创建。
查看CSS的面包屑链接的演示
<div id="crumbs">
<ul>
<li><a href="#">Breadcrumb</a></li>
</ul>
</div>
我们将首先迅速充实面包屑导航链接作为无序列表。每个面包屑链接将显示为<LI>用一个嵌套的锚元素。
#crumbs ul li a {
display: block;
float: left;
height: 50px;
background: #3498db;
text-align: center;
padding: 30px 40px 0 40px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
}
最初的CSS代码风格了每个列表项的锚作为一个整洁的蓝色矩形。文本被集中放置在该空间内，平等地填充被添加到任何一方。为了以后绝对定位元素，位置：亲属;加入使那些绝对定位的对象将显示相对于这个父元素。
#crumbs ul li a:after {
content: "";
border-top: 40px solid red;
border-bottom: 40px solid red;
border-left: 40px solid blue;
position: absolute; right: -40px; top: 0;
}
现在我们要重新建立人字形效果在CSS中，将以前只能是可以实现的背景图片。使用：在选择要创建可以独立风格的一个额外元素。三角形状通过使用各种CSS边框的产生，从而可以在一个单一的蓝色三角形可以通过应用顶部和底部边框相交重叠创建的初始演示中看到。这些都是目前红色的示范，但让这些透明将产生一个单一的蓝色三角形。那么这种边界效应被移动到的地方，通过绝对定位。
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;
使用正确的颜色值的边际效应会产生所需的三角这给面包屑链接流行的V字形。
#crumbs ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #d4f2ff;
position: absolute; left: 0; top: 0;
}
使用相同的原理的另一个三角形形状可应用于面包屑链接的左侧。这一次的边框颜色设置一样的页面背景伪装的蓝色链接背景颜色的部分。
padding: 30px 40px 0 80px;
链接在此之前更多的三角形会影响文字的外观，但一个简单的填充调整将尽快纠正其外观。
<div id="crumbs">
<ul>
<li><a href="#1">One</a></li>
<li><a href="#2">Two</a></li>
<li><a href="#3">Three</a></li>
<li><a href="#4">Four</a></li>
<li><a href="#5">Five</a></li>
</ul>
</div>
随着越来越多的链接添加到HTML的系列面包屑的增加，各由酷字形感谢CSS边框的三角形效果和触控右边距的分离。
#crumbs ul li:first-child a {
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
完整的面包屑导航列表可以通过删除与该的帮助下，第一个和最后一个项目的三角形效果得到进一步风格的第一子：和：最后的孩子选择，然后给出微妙的圆角与边界半径。
CSS的面包屑链接
#crumbs ul li a:hover {
background: #fa5ba5;
}
#crumbs ul li a:hover:after {
border-left-color: #fa5ba5;
}
所有剩下的就是申请一个悬停效果的环节。不要忘了改左边框的颜色上的三角形效果悬停状态，所以整个面包屑链接改变颜色。