// Example:
// @include triangle(#2dd, 15px, 10px, 50%, 0, "bottom", "after");

@mixin triangle($c: #2dd, $w: 15px, $h: 10px, $l: 50%, $t: 0, $direction: "bottom", $element: "after") {
  position: relative;

  &:#{$element} {
    content: "";
    position: absolute;
    border-style: solid;
    display: inline-block;
    height: 0;
    width: 0;
  }

  @if $direction == "top" {
    &:#{$element} {
      border-color: transparent transparent $c;
      border-width: 0 ($w / 2) $h;
      left: calc(#{$l} - #{$w/2});
      top: $t - $h;
    }
  } @else if $direction == "right" {
    &:#{$element} {
      border-color: transparent transparent transparent $c;
      border-width: ($h / 2) 0 ($h / 2) $w;
      right: $l - $w;
      top: calc(#{$t} - #{$h/2});
    }
  } @else if $direction == "bottom" {
    &:#{$element} {
      border-color: $c transparent transparent;
      border-width: $h ($w / 2) 0;
      left: calc(#{$l} - #{$w/2});
      bottom: $t - $h;
    }
  } @else if $direction == "left" {
    &:#{$element} {
      border-color: transparent $c transparent transparent;
      border-width: ($h / 2) $w ($h / 2) 0;
      left: $l - $w;
      top: calc(#{$t} - #{$h/2});
    }
  }
}

@mixin tri($c: #2dd, $w: 20px, $l: 0, $t: 0, $direction: "right", $element: "after") {
  @include triangle($c, $w, $l, $t, $direction, $element);
}