@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;
    }
  }
}

@mixin triangle ($width, $height, $color, $direction: '') {
  @if $direction == '' {
    $direction: $color;
    $color: $height;
    $height: $width;
  }
  $width: $width / 2;

  height: 0;
  width: 0;

  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {

    @if $direction == up {
      border-left: $width solid transparent;
      border-right: $width solid transparent;
      border-bottom: $height solid $color;

    } @else if $direction == right {
      border-top: $width solid transparent;
      border-bottom: $width solid transparent;
      border-left: $height solid $color;

    } @else if $direction == down {
      border-left: $width solid transparent;
      border-right: $width solid transparent;
      border-top: $height solid $color;

    } @else if $direction == left {
      border-top: $width solid transparent;
      border-bottom: $width solid transparent;
      border-right: $height solid $color;
    }
  }

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

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

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

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

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

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

Enable to custom triangle shape
Enable to custom triangle shape

Use $width and $height to custom triangle shape, if omit $height, this
mixin will generate code in the old way. The only downside is that
$width value should always be even number, otherwise triangle width
will be short 1px.
