arrowed breadcrumbs twitter-bootstrap

breadcrumb.scss

$unit: 20px;    // some basic unit size
$color1: #FFF;  // background-color
$color9: #DDD;  // arrow background-color

.breadcrumb {
  background-color: $color1;
  margin-bottom: 0;
}

.breadcrumb {
  overflow: hidden;
  &.arrowed {
    li {
      background-color: $color9;
      float: left;
      position: relative;
      margin-left: $unit/2;
      &:after, &:before {
        content: " ";
        position: absolute;
        right: -$unit;
        top: 0;
        border-top: $unit solid transparent;
        border-bottom: $unit solid transparent;
        border-left: $unit solid $color9;
        z-index: 2;
      }
      &:before {
        border-left-color: $color1;
        right: auto;
        left: 0;
        z-index: 1;
      }
      &.active, a {
        padding: $unit/3 $unit $unit/3 $unit*1.5;
        display: block;
        text-shadow:none;
      }
      &:first-child {
        margin-left: 0;
        &:before {
          display: none;
        }
        a {
          padding: $unit/3 $unit $unit/3 $unit;
        }
      }
    }
    .divider {
      display: none;
    }
  }
}