純CSS實現面包屑式導航

參照着教程做了一個面包屑式的導航。在這里分享一下實現方式，自己也在溫習一下。首先效果如圖：

HTML代碼如下：

<div id="crumbs">
	<ul>
		<li><a href="#">Breadcrumb</a></li>
	</ul>
</div>

我們用一個無序列表來填充面包屑導航。每一個導航連接都相當於一個內嵌了<a>元素的<li>元素。
首先將每一個a元素渲染為藍色的矩形框。文本居中放置，兩邊加上適當的內邊距。設置<a>元素為相對定位。這樣它的絕對定位的子元素可以相對於它來進行定位。

#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;
}

使用：after選擇器創建一個元素。使用css邊框來生成一個三角形。給使用：after選擇器生成的元素應用上下邊框，左邊框，然后把上下邊框的顏色設置成透明的。在將該元素放置到合適的地方（通過position:absolute），注意設置z-index

#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;
        z-index:5;
}

設置上下邊框為透明，重新設置左邊框的顏色后

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

使用同樣的方法，在矩形框的左邊渲染一個三角形樣式。這一次還是設置：before元素的上下邊框為透明，設置左邊框的顏色和頁面的背景色一致，偽裝成頁面的一部分

#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;
}

<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>

#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; 
}

#crumbs ul li a:hover {
	background: #fa5ba5;
}
	#crumbs ul li a:hover:after {
		border-left-color: #fa5ba5;
	}
此次一個完整的面包屑導航就完成了。翻譯水平還是有待提升。。。
附上原文地址：http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css