<ul class="breadcrumbs">
  <li><a href="">Path 01</a></li>
  <li><a href="">Path 02</a></li>
  <li><a href="">Path 03</a></li>
  <li><a href="">Path 04</a></li>
  <li><a href="" class="current">Path 05</a></li>
</ul>

<ul class="breadcrumbs race">
  <li><a href="">Path 01</a></li>
  <li><a href="">Path 02</a></li>
  <li><a href="">Path 03</a></li>
  <li><a href="">Path 04</a></li>
  <li><a href="" class="current">Path 05</a></li>
</ul>

<ul class="breadcrumbs arrow">
  <li><a href="">Path 01</a></li>
  <li><a href="">Path 02</a></li>
  <li><a href="">Path 03</a></li>
  <li><a href="">Path 04</a></li>
  <li><a href="" class="current">Path 05</a></li>
</ul>

<ul class="breadcrumbs circle">
  <li><a href="">Path 01</a></li>
  <li><a href="">Path 02</a></li>
  <li><a href="">Path 03</a></li>
  <li><a href="">Path 04</a></li>
  <li><a href="" class="current">Path 05</a></li>
</ul>

// RESET
// ---------------------------

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  min-height: 100%;
}

html {
  font-family: sans-serif;
  font-size: 100%;
}

body {
  font-size: 16px;
  line-height : 1.5;
  width : 100%;
}


li {
  list-style-type: none;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
}

ul {
    margin: 2em 1em;
}


// STYLE
// ---------------------------
$base__fontsize: 16px;

$breadcrumbs-settings: (
  li-border-right : 2px,
  font-size       : $base__fontsize,
  bg-color        : tomato
);


@mixin breadcrumbs-race() {
  &.race {
    li {
      border-color: transparent;
      
      &:last-child {
        a {
          border: 2px solid black;
        }
      }
    }
    a {
      border: 2px solid tomato;
      
      &:hover {
        border-bottom: 5px solid tomato;
      }
    }
  }
}

@mixin breadcrumbs-arrow() {
  &.arrow {
    &:after {
      content: '';
      display: table;
      clear: both;
    }
    
    li {
      transform: skew(0, 0);
      float: left;
      
      &:first-child {
        a {
          border-left: 1px solid black;
        }
      }
      
      &:last-child {
        
        a {
          border-right: 1px solid black;
          &:after,
          &:before {
            content: normal;
          }
        }
      }
    }
    
    a {
      position: relative;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      padding-left: map-get($breadcrumbs-settings, font-size)*1.5;
      
      &:after,
      &:before {
          content       : '';
          position      : absolute;
          top           : 50%;
          margin-top    : map-get($breadcrumbs-settings, font-size)*-1;
          border-top    : map-get($breadcrumbs-settings, font-size) solid transparent;
          border-bottom : map-get($breadcrumbs-settings, font-size) solid transparent;
          border-left   : map-get($breadcrumbs-settings, font-size) solid white;
          right         : map-get($breadcrumbs-settings, font-size)*-0.9;
          z-index       : 2;
      }
      
      &:before {
        right: map-get($breadcrumbs-settings, font-size)*-1;
        border-left-color: black;
        z-index: 1;
        transform: scaleY(2px);
      }
      
      &:after {
        transform: scaleY(1.0);
      }
    }
  }
}



.breadcrumbs {
  li {
    display: inline-block;
    transform: skew(-15deg, 0);
    border-right: map-get($breadcrumbs-settings, li-border-right) solid darken(black, 20%);
    margin: 0;
    margin-right: map-get($breadcrumbs-settings, li-border-right)*-2;
    
    &:last-child {
      border-right: 0;
    }
  }
  a {
    box-sizing: border-box;
    text-decoration: none;
    padding: 6px 12px;
    color: black;
    transition: all 200ms ease;
    border: 2px solid transparent;
    
    &:hover {
      border-bottom: 2px solid chartreuse;
      cursor: pointer;
    }
    
    &.current {
      background-color: chartreuse;
      color: black;
    }
  }
  
  @include breadcrumbs-race();
  @include breadcrumbs-arrow();
}