imageless arrows

gistfile1.scss

// you can pass it only the following direction keywords: 
// up, down, left, right
//
// HOW TO USE
//
// $direction: up;
// $color: #c00;
// $size: 20px;
// .class {
//    $include arrow($direction, $color, $size);
// }
//

@mixin arrow($direction, $color, $size) {
  display: inline-block;
  width: 0;
  height: 0;
  @if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  } @else if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;    
  } @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;    
  } @else if $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;    
  }
}