stelios-c
6/28/2017 - 2:54 PM

Mixin for css triangle

Mixin for css triangle

@mixin css-triangle($direction: 'right', $color: #000, $triangle_base_size: 10px, $triangle_height: ($triangle_base_size / 2)) {
  width: 0;
  height: 0;

  @if ($direction == 'up') {
    border-color: transparent transparent $color;
    border-width: 0 ($triangle_base_size / 2) $triangle_height;
    border-style: solid;
  }

  @else if ($direction == 'down') {
    border-color: $color transparent transparent;
    border-width: $triangle_height ($triangle_base_size / 2) 0;
    border-style: solid;
  }

  @else if ($direction == 'left') {
    border-color: transparent $color transparent transparent;
    border-width: ($triangle_base_size / 2) $triangle_height ($triangle_base_size / 2) 0;
    border-style: solid;
  }

  @else {
    border-color: transparent transparent transparent $color;
    border-width: ($triangle_base_size / 2) 0 ($triangle_base_size / 2) $triangle_height;
    border-style: solid;
  }
}