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