做之前，先看一下效果圖趋箩。
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;
}
現(xiàn)在的效果是這樣的。
demo03.png
其實票腰，我到現(xiàn)在還沒明白其中的原理城看，為什么指定了上下左邊框中間會有一個三角形出現(xiàn)？希望有明白原理的看到這篇文章能夠解釋一下杏慰。
以上顏色的設置只是為了觀察测柠，下面我們可以將上下邊框設置為透明，將左邊框設置為與 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
好了吟税，現(xiàn)在我們的效果就已經完成了，如果想要實現(xiàn)我們在開始時候展示的那種效果姿现，我們就需要多寫幾個標簽了肠仪，而且第一個元素和最后一個元素和中間的元素效果還是不一樣的，下面我們來書寫這段代碼备典。
#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;
}
這個時候我們點擊標簽拌屏，會出現(xiàn)一個白色的邊框潮针，十分難看，可以在 a 元素的 style 中加上下面這行代碼倚喂。
outline: none;
Ending.
