CSS3 Triangle Bread crumb Navigation Menu

.breadcrumb { list-style:none; overflow:hidden; font:bold 12px Arial, Helvetica, sans-serif; } .breadcrumb li { float:left; }
.breadcrumb li a { color:white; text-decoration:none; padding:10px 0 10px 55px; background:#666; position:relative; display:block; float:left; }
.breadcrumb li a:after { content:" "; display:block; width:0; height:0; border-top:50px solid transparent;
border-bottom:50px solid transparent; border-left:30px solid #666; position:absolute; top:50%; margin-top:-50px; left:100%; z-index:2; }
.breadcrumb li a:before { content:" "; display:block; width:0; height:0; border-top:50px solid transparent;
border-bottom:50px solid transparent; border-left:30px solid white; position:absolute; top:50%; margin-top:-50px; margin-left:1px; left:100%; z-index:1; }
.breadcrumb li:first-child a { padding-left:10px; }
.breadcrumb li:nth-child(2) a { background:#666; } .breadcrumb li:nth-child(2) a:after { border-left-color:#666; }
.breadcrumb li:nth-child(3) a { background:#666; } .breadcrumb li:nth-child(3) a:after { border-left-color:#666; }
.breadcrumb li:nth-child(4) a { background:#666; } .breadcrumb li:nth-child(4) a:after { border-left-color:#666; }
.breadcrumb li:nth-child(5) a { background:#666; } .breadcrumb li:nth-child(5) a:after { border-left-color:#666; }
.breadcrumb li:last-child a { background:white !important; color:black; pointer-events:none; cursor:default; }
.breadcrumb li:last-child a:after { border:0; }
.breadcrumb li a:hover { background:#000; } .breadcrumb li a:hover:after { border-left-color:#000 !important; }

<div id="page-wrap">
<ul class="breadcrumb">
<li> <li> <li> <li> <li> <li></li>
</ul>
</div>

Tagged in:

• Triangle Bread crumb
• Bread crumb menu
• css3 Bread crumb
• CSS3