@mixin triangle ($size, $color, $direction) {

height: 0;
width: 0;

@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;

  } @else if $direction == right {
    border-left-color:   $color;

  } @else if $direction == down {
    border-top-color:    $color;

  } @else if $direction == left {
    border-right-color:  $color;
  }
}

@else if ($direction == up-right) or ($direction == up-left) {
  border-top: $size solid $color;

  @if $direction == up-right {
    border-left:  $size solid transparent;

  } @else if $direction == up-left {
    border-right: $size solid transparent;
  }
}

@else if ($direction == down-right) or ($direction == down-left) {
  border-bottom: $size solid $color;

  @if $direction == down-right {
    border-left:  $size solid transparent;

  } @else if $direction == down-left {
    border-right: $size solid transparent;
  }
}

}