做之前灌侣，先看一下效果圖治专。
demo01.png
首先卖陵，書寫好 HTML 代碼。
? ? <div id="crumbs">
? ? ? ? <ul>
? ? ? ? ? ? <li><a href="#">Home</a></li>
? ? ? ? </ul>
? ? </div>
這里我們先以一個(gè) li 標(biāo)簽為例张峰。
? #crumbs ul{
? ? ? ? list-style: none;
? ? }
將列表的默認(rèn)樣式修改掉泪蔫。
? ? #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;
? ? }
設(shè)置 position 為 relative， 因?yàn)橄旅嫖覀円?before, after 繪制效果挟炬。
設(shè)置高度為 30px鸥滨，padding-top 為 10px ，所以這里元素的高度為 40px谤祖。
這個(gè)時(shí)候的效果如下所示。
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
其實(shí)粥喜，我到現(xiàn)在還沒明白其中的原理，為什么指定了上下左邊框中間會(huì)有一個(gè)三角形出現(xiàn)橘券？希望有明白原理的看到這篇文章能夠解釋一下额湘。
以上顏色的設(shè)置只是為了觀察，下面我們可以將上下邊框設(shè)置為透明旁舰，將左邊框設(shè)置為與 a 元素相同锋华。
? ? border-left: 20px solid #3498db;
? ? border-top: 20px solid transparent;
? ? border-bottom: 20px solid transparent;
這個(gè)時(shí)候效果如下。
demo04.png
可見箭窜，效果已經(jīng)出來(lái)了毯焕，利用相同的原理，我們繪制出左邊的效果磺樱。
? #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)在我們的效果就已經(jīng)完成了，如果想要實(shí)現(xiàn)我們?cè)陂_始時(shí)候展示的那種效果竹捉，我們就需要多寫幾個(gè)標(biāo)簽了芜辕，而且第一個(gè)元素和最后一個(gè)元素和中間的元素效果還是不一樣的，下面我們來(lái)書寫這段代碼块差。
? ? ? ? #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;
? ? ? ? }
以上代碼并不難懂侵续，我就不在解釋倔丈，這個(gè)時(shí)候的效果如下。
demo06.png
為了美觀状蜗，最好還是為鼠標(biāo)懸停設(shè)置一個(gè)背景改變的效果乃沙。
? ? ? ? #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;
? ? ? ? }
這個(gè)時(shí)候我們點(diǎn)擊標(biāo)簽，會(huì)出現(xiàn)一個(gè)白色的邊框诗舰，十分難看警儒，可以在 a 元素的 style 中加上下面這行代碼。
? ? outline: none;
Ending.
