<h1>Classic breadcrumb</h1>
<div class="breadcrumb">
<a>Lorem</a>
<a>Ipsum</a>
<a>Dolor</a>
<a>Sit</a>
<a>Amet</a>
<a>Lorem</a>
<a>Ipsum</a>
<a>Dolor</a>
<a>Sit</a>
<span>Amet</span>
</div>
<h1>Breadcrumb with wrapping arrows</h1>
<ul>
<li><a>Lorem</a></li>
<li><a>Ipsum</a></li>
<li><a>Dolor</a></li>
<li><a>Sit</a></li>
<li><a>Amet</a></li>
<li><a>Lorem</a></li>
<li><a>Ipsum</a></li>
<li><a>Dolor</a></li>
<li><a>Sit</a></li>
<li><span>Amet</span></li>
</ul>
/**********************/
/* Classic breadcrumb */
/**********************/
.breadcrumb {
font-size: 0px;
}
.breadcrumb > * {
font-size: 16px;
color: #253e6a;
background: #c8f1fe;
display: inline-block;
padding: 0 8px 0 30px;
margin: 0 10px 10px 0;
height: 40px;
line-height: 40px;
position: relative;
}
.breadcrumb > span {
background: #76cae6;
color: #fff;
}
.breadcrumb > span:after {
border-color: transparent transparent transparent #76cae6;
}
/* Left inset arrow */
.breadcrumb > :before {
position: absolute;
top: 0;
content: '';
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #9ad4e2;
z-index: 1;
}
/* Right arrow tip */
.breadcrumb > :after {
position: absolute;
top: 0;
content: '';
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #c8f1fe;
z-index: 2;
}
/* The first item has no inset arrow */
.breadcrumb :first-child {
padding-left: 20px;
}
.breadcrumb :first-child:before {
border: none
}
/***********************************/
/* Alternative: wrap-around arrows */
/***********************************/
ul {
list-style: none;
padding: 0;
margin: 0 -10px;
position: relative;
overflow: hidden;
font-size: 0;
}
li {
margin: 0;
color: #253e6a;
display: inline-block;
padding: 0;
margin: 0 10px 10px 0;
height: 40px;
line-height: 40px;
background: #9ad4e2;
}
/* The inset arrow on the left */
li:after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #9ad4e2;
z-index: 1;
}
/* The button faces */
li > * {
display: inline-block;
font-size: 16px;
background: #c8f1fe;
padding: 0 10px 0 30px;
margin: 0 10px 0 -10px;
}
/* The right pointing arrow */
li > *:after {
position: absolute;
content: '';
width: 0;
height: 0;
margin-left: 10px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #c8f1fe;
z-index: 2;
}
/* The tail of the wrapped arrow */
li > *:before {
content: '';
z-index: -1;
background: #c8f1fe;
width: 100%;
height: 40px;
position: absolute;
}
/* Highlight the last child */
li:last-child > * {
background: #76cae6;
color: #fff;
}
li:last-child > *:after {
border-color: transparent transparent transparent #76cae6;
}
/* Cover the arrow tails with the background color */
li:last-child > *:before {
background: #9ad4e2;
}
/***************/
/* Page styles */
/***************/
body {
background: #9ad4e2;
font-family: sans-serif;
padding: 10px;
margin: 0;
}
h1 {
font-weight: lighter;
color: #c8f1fe;
}