<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Parent</a></li>
  <li><a href="#">Child</a></li>
  <li><a href="#">Parent</a></li>
  <li><a href="#">Child</a></li>
  <li><a href="#">Parent</a></li>
  <li><a href="#">Child</a></li>
  <li><a href="#">Current</a></li>
</ul>

@import "compass/css3";

@mixin triangle ($width, $color, $direction) {
    width: 0;
    height: 0;
 
    @if $direction == up {
        border-width: $width / 2;
        border-style: solid;
        border-color: transparent transparent $color transparent;
    } @else if $direction == right {
        border-width: $width / 2;
        border-style: solid;
        border-color: transparent transparent transparent $color;
    } @else if $direction == down {
        border-width: $width / 2;
        border-style: solid;
        border-color: $color transparent transparent transparent;
    } @else if $direction == left {
        border-width: $width / 2;
        border-style: solid;
        border-color: transparent $color transparent transparent;
    } @else if $direction == upright {
        border-top: $width solid $color;
        border-left: $width solid transparent;
    } @else if $direction == upleft {
        border-top: $width solid $color;
        border-right: $width solid transparent;
    } @else if $direction == downright {
        border-bottom: $width solid $color;
        border-left: $width solid transparent;
    } @else if $direction == downleft {
        border-bottom: $width solid $color;
        border-right: $width solid transparent;
    }
}


$breadcrumb-bg-color: #eee;
$breadcrumb-current-bg-color: #ddd;
$breadcrumb-label-color: #888;
$breadcrumb-height: 30px;


body { width: 960px; margin: 50px auto;} 
.breadcrumb {
  list-style: none;
  padding: 0;
  li {
    display:inline-block;
    position: relative;
    line-height: $breadcrumb-height;
    background: $breadcrumb-bg-color;
    margin-right: $breadcrumb-height/2;
    font-size: 14px;
    &:before {
      content: "";
      display: block;
      position: absolute;
      top:0;
      left:-$breadcrumb-height/2;
      @include triangle($breadcrumb-height/2, $breadcrumb-bg-color, upright);
    }
    &:after {
      content: "";
      display: block;
      position: absolute;
      bottom:0;
      left:-$breadcrumb-height/2;
      @include triangle($breadcrumb-height/2, $breadcrumb-bg-color, downright);
    }
    
    a {
      display: block;
      color: $breadcrumb-label-color;
      text-decoration: none;
      padding: 0 $breadcrumb-height/4;
      
      width: 0px;
      white-space: nowrap;
      overflow: hidden;
      //text-overflow: ellipsis;
      
      //@include transition(all 500ms ease);
      
      &:after {
        content: "";
        display: block;
        position: absolute;
        bottom:0;
        right: -$breadcrumb-height;
        @include triangle($breadcrumb-height, $breadcrumb-bg-color, right);
      }
    }
    &:first-child {
      @include border-left-radius();
      &:before, &:after { display: none;}
      a:before {
        content: "";
        display: inline-block;
        width: $breadcrumb-height/4;
        height: $breadcrumb-height/4;
        margin-right: $breadcrumb-height/4;
        background: $breadcrumb-label-color;
      }
    }
    &:last-child a {
      @include border-right-radius();
      &:after { display: none; }
    }
    &:last-child, &:hover {
      &:before, &:after { 
        border-top-color: $breadcrumb-current-bg-color;
        border-bottom-color: $breadcrumb-current-bg-color;
      }
      a { background: $breadcrumb-current-bg-color; }
      a:after { border-left-color: $breadcrumb-current-bg-color; }
    }
    &:last-child + li { background: #eFe; }
    &:first-child a,
    &:last-child a,
    &:hover a { width: auto; }
  }
}