@mixin triangle($pos: top, $color: red, $size: 20px) {
  $size-h: null;

  @each $s in $size {
    $size-h: join($s, $size-h);
  }
  @if $pos == top or $pos == bottom {
    border-width: $size;
  } @else if $pos == left or $pos == right {
    border-width: $size-h;
  }

  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-#{$pos}-width: 0;
  border-#{opposite-direction($pos)}-color: $color;  
}