Mixin to generate triangles with borders (see http://css-tricks.com/snippets/css/css-triangle/)

border-triangle-mixin.scss

@mixin triangle($direction:up, $hypotenuse-width:20px, $color:black) {
  $triangle-border-width: $hypotenuse-width/2;
  $triangleSettings: (
    up: (
      border-left: $triangle-border-width solid transparent,
      border-right: $triangle-border-width solid transparent,
      border-bottom: $triangle-border-width solid $color,
    ),
    right: (
      border-top: $triangle-border-width solid transparent,
      border-bottom: $triangle-border-width solid transparent,
      border-left: $triangle-border-width solid $color,
    ),
    down: (
      border-left: $triangle-border-width solid transparent,
      border-right: $triangle-border-width solid transparent,
      border-top: $triangle-border-width solid $color
    ),
    left: (
      border-top: $triangle-border-width solid transparent,
      border-bottom: $triangle-border-width solid transparent,
      border-right: $triangle-border-width solid $color
    )
  );

  width: 0;
  height: 0;
  @each $property, $value in map_get($triangleSettings,$direction) {
    #{$property}: $value;
  }
}