<ul class="breadcrumbs">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
</ul>
$primary-color: #4679BD;
$hover-color: #F6F6F6;
$text-color: #F6F6F6;
$hover-text-color: #4679BD;
* { margin: 0; padding: 0; font-family: sans-serif; }
body { background: url("http://people.ofproverbs.com/images/footerbg.jpg") top center repeat; }
a { text-decoration: none; }
li { list-style: none; float:left; }
.breadcrumbs {
margin: 10px;
float:left;
}
li a:hover { background: $hover-color; color: $hover-text-color; }
li a:hover:after { color: $hover-color; }
li a:hover:before { border-left: 25px solid $hover-color; }
li a {
display: block;
min-height: 20px;
max-height: 20px;
border-image: none;
position: relative;
margin-left: 25px;
margin-right: 6px;
padding: 15px 0 15px 10px;
color: $text-color;
background: $primary-color;
z-index: 1;
}
li a:before {
content: "";
position: absolute;
left: 100%;
top: 0;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 25px solid $primary-color;
border-bottom: 25px solid transparent;
z-index: -1;
}
li a:after {
content: "";
position: absolute;
left: -25px;
top: 0px;
width: 0px;
height: 0px;
border-width: 25px;
border-style: solid;
border-left: 25px solid transparent;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
color: $primary-color;
z-index: -1;
}
li:first-child a {
margin-left: 0;
padding-left: 20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
li:first-child a:after {
display: none;
}
li:last-child a {
padding-right: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: $hover-color;
color: $hover-text-color;
text-decoration: underline;
cursor: default;
}
li:last-child a:after {
color: $hover-color;
}
li:last-child a:before {
display: none;
}
View Compiled
This Pen doesn't use any external CSS resources.