<ul class="breadcrumb-arrows">
    <li><a href="#">Foobar</a></li>
    <li class="active"><a href="#">Foobar</a></li>
    <li><a href="#">Foobar</a></li>
    <li><a href="#">Foobar</a></li>
    <li><a href="#">Foobar</a></li>
</ul>

$breadcrumbs-height: 30px
.breadcrumb-arrows
  li
    display: inline-block
    line-height: $breadcrumbs-height
    position: relative
    &:before
      content: " "
      height: 0
      width: 0
      position: absolute
      left: -2px
      border-style: solid
      border-width: 15px 0 15px 15px
      border-color: transparent transparent transparent #fff
      z-index: 0

    &:first-child:before
      border-color: transparent
  a:after
    content: " "
    height: 0
    width: 0
    position: absolute
    right: -15px
    border-style: solid
    border-width: 15px 0 15px 15px
    border-color: transparent transparent transparent #ccc
    z-index: 10

  .active a
    background: orange
    z-index: 100
    &:after
      border-left-color: orange
  a
    display: block
    background: #ccc
    padding: 0 20px
  a:hover
    background: pink
  a:hover:after

    border-color: transparent transparent transparent pink