HTML
<div id="crumbs">
<h1>Breadcrumbs</h1>
<ul>
<li><a href="#1"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#2"><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li>
<li><a href="#3"><i class="fa fa-cart-plus" aria-hidden="true"></i> Cart</a></li>
<li><a href="#4"><i class="fa fa-credit-card-alt" aria-hidden="true"></i> Checkout</a></li>
</ul>
</div>
SCSS
$crumbs-back:#F3F5FA;
$text-color:#8093A7;
body {
margin: 100px auto;
font-family: Helvetica;
background: #FFF;
}
#crumbs {
text-align: center;
h1{
padding:0 0 30px;
text-transform:uppercase;
font-size:.9rem;
font-weight:600;
letter-spacing:.01rem;
color: $text-color;
}
ul {
list-style: none;
display: inline-table;
li {
display: inline;
a {
display: block;
float: left;
height: 50px;
background: #F3F5FA;
text-align: center;
padding: 30px 20px 0 60px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: $text-color;
&:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #F3F5FA;
position: absolute;
right: -40px;
top: 0;
z-index: 1;
}
&:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #fff;
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
#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: 40px;
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: #357DFD;
color:#fff;
}
#crumbs ul li a:hover:after {
border-left-color: #357DFD;
color:#fff;
}
