Generated by SassMeister.com.

arrows.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

div {
  background: #000;
  margin: 1em auto;
  width: 5em;
  height: 5em;
}

@mixin arrow($direction, $color: inherit, $size: .5em, $position: true) {
  @if $position {
    position: relative;
  }
  
  &::before {
    border: $size solid transparent;
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    
    @if $position {
      position: absolute;
      margin: -$size;
    }
    
    @if $direction == "up" or $direction == "top" {
      border-top: none;
      border-bottom-color: $color;
      
      @if $position {
        left: 50%; 
      }
    }
    @else if $direction == "right" {
      border-right: none;
      border-left-color: $color;
      
      @if $position {
        right: 0;
        top: 50%; 
      }
    }
    @else if $direction == "down" or $direction == "bottom" {
      border-bottom: none;
      border-top-color: $color;
      
      @if $position {
        bottom: 0;
        left: 50%; 
      }
    }
    @else if $direction == "left" {
      border-left: none;
      border-right-color: $color;
      
      @if $position {
        top: 50%;
      }
    }
  }
}

.arrow-up {
  @include arrow(up);
}

.arrow-right {
  @include arrow(right);
}

.arrow-bottom {
  @include arrow(bottom);
}

.arrow-left {
  @include arrow(left);
}