Triangle Mixin

Triangle Mixin

@mixin triangle($color, $size, $side) {
  @include pseudo;
  width:  $size;
  height: $size;
  @include background-image(linear-gradient(top left, $color, $color 49%, transparent 49%));

  @if ($side == "right") {
    right: 0;
    top: 50%;
    margin-top: -$size / 2;
    @include rotate(135deg);
  } @else if ($side == "left") {
    left: -$size;
    top: 50%;
    margin-top: -$size / 2;
    @include rotate(90deg);
  } @else if ($side == "top") {
    bottom: -$size / 2 + 1px;
    right: 50%;
    margin-right: -$size / 2;
    @include rotate(45deg);
  } @else {
    bottom: -$size / 2 + 1px;
    right: 50%;
    margin-right: -$size / 2;
    @include rotate(-135deg);
  }
}