做之前，先看一下效果图。
demo01.png
首先，书写好 HTML 代码。
<div id="crumbs">
<ul>
<li><a href="#">Home</a></li>
</ul>
</div>
这里我们先以一个 li 标签为例。
#crumbs ul{
list-style: none;
}
将列表的默认样式修改掉。
#crumbs ul li a{
float: left;
margin-right: 30px;
display: inline-block;
position: relative;
height: 30px;
padding: 10px 20px 0 20px;
text-align: center;
background-color: #3498db;
color: #fff;
text-decoration: none;
font-size: 20px;
}
- 设置
position为relative， 因为下面我们要用before, after绘制效果。 - 设置高度为
30px，padding-top为10px，所以这里元素的高度为40px。
这个时候的效果如下所示。
demo02.png
#crumbs ul li a:after{
content: "";
border-left: 20px solid green;
border-top: 20px solid red;
border-bottom: 20px solid red;
position: absolute;
right: -20px;
top: 0;
}
现在的效果是这样的。
demo03.png
其实，我到现在还没明白其中的原理，为什么指定了上下左边框中间会有一个三角形出现？希望有明白原理的看到这篇文章能够解释一下。
以上颜色的设置只是为了观察，下面我们可以将上下边框设置为透明，将左边框设置为与 a 元素相同。
border-left: 20px solid #3498db;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
这个时候效果如下。
demo04.png
可见，效果已经出来了，利用相同的原理，我们绘制出左边的效果。
#crumbs ul li a:before{
content: "";
border-top: 20px solid #3498db;
border-bottom: 20px solid #3498db;
border-left: 20px solid transparent;
position: absolute;
top: 0;
left: -20px;
}
效果如下
demo05.png
好了，现在我们的效果就已经完成了，如果想要实现我们在开始时候展示的那种效果，我们就需要多写几个标签了，而且第一个元素和最后一个元素和中间的元素效果还是不一样的，下面我们来书写这段代码。
#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{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after{
display: none;
}
以上代码并不难懂，我就不在解释，这个时候的效果如下。
demo06.png
为了美观，最好还是为鼠标悬停设置一个背景改变的效果。
#crumbs ul li a:hover{
background-color:#fa5ba5;
}
#crumbs ul li a:hover:after{
border-left-color: #fa5ba5;
}
#crumbs ul li a:hover:before{
border-top-color: #fa5ba5;
border-bottom-color: #fa5ba5;
}
这个时候我们点击标签，会出现一个白色的边框，十分难看，可以在 a 元素的 style 中加上下面这行代码。
outline: none;
Ending.
