Learn to use CSS3 to create website breadcrumb navigation effect_html/css_WEB-ITnose

As one of the most important forms of navigation display, breadcrumb navigation allows users to know more clearly the hierarchical structure of the page they are on, allowing them to easily navigate to the previous page. In this tutorial, you will learn how to create your own breadcrumb effect using CSS3 technology.

Effect demonstration Plug-in download Detailed tutorial

HTML sample code:

<ul id="breadcrumbs-one">    <li><a href="">Lorem ipsum</a></li>    <li><a href="">Vivamus nisi eros</a></li>    <li><a href="">Nulla sed lorem risus</a></li>    <li><a href="">Nam iaculis commodo</a></li>    <li><a href="" class="current">Current crumb</a></li></ul>

CSS sample code:

#breadcrumbs-one{  background: #eee;  border-width: 1px;  border-style: solid;  border-color: #f5f5f5 #e5e5e5 #ccc;  border-radius: 5px;  box-shadow: 0 0 2px rgba(0,0,0,.2);  overflow: hidden;  width: 100%;}#breadcrumbs-one li{  float: left;}#breadcrumbs-one a{  padding: .7em 1em .7em 2em;  float: left;  text-decoration: none;  color: #444;  position: relative;  text-shadow: 0 1px 0 rgba(255,255,255,.5);  background-color: #ddd;  background-image: linear-gradient(to right, #f5f5f5, #ddd);  }#breadcrumbs-one li:first-child a{  padding-left: 1em;  border-radius: 5px 0 0 5px;}#breadcrumbs-one a:hover{  background: #fff;}#breadcrumbs-one a::after,#breadcrumbs-one a::before{  content: "";  position: absolute;  top: 50%;  margin-top: -1.5em;     border-top: 1.5em solid transparent;  border-bottom: 1.5em solid transparent;  border-left: 1em solid;  right: -1em;}#breadcrumbs-one a::after{   z-index: 2;  border-left-color: #ddd;  }#breadcrumbs-one a::before{  border-left-color: #ccc;    right: -1.1em;  z-index: 1; }#breadcrumbs-one a:hover::after{  border-left-color: #fff;}#breadcrumbs-one .current,#breadcrumbs-one .current:hover{  font-weight: bold;  background: none;}#breadcrumbs-one .current::after,#breadcrumbs-one .current::before{  content: normal;  }