<ul class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Lab Support</a></li>
  <li><a href="#">Hazardous Materials</a></li>
  <li><a href="#">Helpful Links</a></li>
  <li><a href="#">Endpoint</a></li>
</ul>

%clearfix {
  &:before,
  &:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }

  &:after {
      clear: both;
  }
}

    $black: #000000;

.breadcrumbs {
  list-style: none;
  @extend %clearfix;
  font-weight: 300;
  
  a {
    padding-left: .3em;
    color: white;
    text-decoration: none;
    &:hover { text-decoration: underline; }
  }
  
  li {
    float: left;
    padding: .5em .5em .5em 1em;
    background: #000;
    
    &:after {
      content: '';
      width: 0;
      height: 0;
      position: relative;
      left: 13px;
      border-style: solid;
      border-width: 6px 0 6px 10px;
      border-color: transparent transparent transparent black;
    }
    
    &:nth-child(2) {
      background: lighten($black, 20%);
      &:after {
        border-color: transparent transparent transparent lighten($black, 20%);
      }
    }
    
    &:nth-child(3) {
      background: lighten($black, 40%);
      &:after {
        border-color: transparent transparent transparent lighten($black, 40%);
      }
    }
    
    &:nth-child(4) {
      background: lighten($black, 60%);
      &:after {
        border-color: transparent transparent transparent lighten($black, 60%);
      }
    }
    
    &:last-child {
      background: linear-gradient(#d0b87c, darken(#d0b87c, 17%));
      padding-right: 1em;
      &:after {
        display: none;
      }
    }
  }
}

body {
  padding: 3em;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
}