Triangle - Sass mixin used to generate CSS triangles.

triangle.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// @author Zakir Tariverdiev
// @created Feb 25, 2014
// @desciption Generates triangle based on the parameters passed.
// @param $direction - direction which triangle is facing
// @param $size - size of the triangle. 
// @param $sides - size of the triangle's sides
// @param $color - color of the triangle.
// ----

@mixin triangle($direction, $size, $sides, $color) {
  width: 0;
  height: 0;
  
  @if ($direction == 'up') {
    border: {
      left: $sides solid transparent;
      right: $sides solid transparent;
      bottom: $size solid $color;
    }
  }

  @if ($direction == 'down') {
    border: {
      left: $sides solid transparent;
      right: $sides solid transparent;
      top:  $size solid $color;
    }
  }

  @if ($direction == 'right') {
    border: {
      top: $sides solid transparent;
      bottom: $sides solid transparent;
      left: $size solid $color;
    }
  }

  @if ($direction == 'left') {
    border: {
      top: $sides solid transparent;
      bottom: $sides solid transparent;
      right: $size solid $color;
    }
  }
}