<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>

$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;
				}