@mixin triangle($direction, $color, $size) {
  height: 0;
  width: 0;
  position: absolute;
  content: '';
  border: solid transparent;
  border-color: rgba(0, 0, 0, 0);
  border-#{$direction}-color: $color;
  border-width: $size;
  #{$direction}: 100%;
  @if $direction == top or $direction == bottom {
    margin-left: -$size;
    left: 50%;
  }
  @if $direction == left or $direction == right {
    margin-top: -$size;
    top: 50%;
  }
}
