Sass triangle

_triangle.scss

@mixin triangle(
  $dir: top,
  $pos: 50%,
  $color1: #fff,
  $color2: darken($color1, 30%),
  $size1: 6px,
  $size2: $size1
) {
  $opos: map-get(( top: bottom, right: left, bottom: top, left: right ), $dir);
  $transparent: if($dir == left or $dir == right, (top, bottom), (left, right));
  &:before,
  &:after {
    #{nth($transparent, 1)}: $pos;

    height: 0;
    width: 0;
    display: block;
    content: " ";
    position: absolute;
  }
  &:before {
    border-#{nth($transparent, 1)}: #{$size2 + 1} solid transparent;
    border-#{nth($transparent, 2)}: #{$size2 + 1} solid transparent;
    border-#{$opos}: #{$size1 + 1} solid $color2;
    margin-#{nth($transparent, 1)}: -1 - $size2;
    #{$dir}: -1 - $size1;
  }
  &:after {
    border-#{nth($transparent, 1)}: $size2 solid transparent;
    border-#{nth($transparent, 2)}: $size2 solid transparent;
    border-#{$opos}: $size1 solid $color1;
    margin-#{nth($transparent, 1)}: - $size2;
    #{$dir}: - $size1;
  }
}

Usage:
@include triangle(top);
Will create a small triangle pointing up.