Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="Box--right"></div>
<div class="Box--bottom"></div>
<div class="Box--left"></div>
<div class="Box--top"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// Lib
//------------------------------------------------

@mixin triangle( $length, $direction, $colour ) {
  $adjacent: opposite-side($direction);
  border: $length solid transparent;
  border-#{$adjacent}: $length solid $colour;
  border-#{$direction}: 0;
  height:0;
  width:0;
}

@function opposite-side($side){
  $sides:(
    top: bottom,
    bottom: top,
    left: right,
    right: left
  );
  @return map-get($sides, $side);
}

// Use
//------------------------------------------------

.Box--right {
  @include triangle(20px, right, red)
}

.Box--left {
  @include triangle(20px, left, red)
}

.Box--top {
  @include triangle(20px, top, red)
}

.Box--bottom {
  @include triangle(20px, bottom, red)
}

SassMeister-output.css

.Box--right {
  border: 20px solid transparent;
  border-left: 20px solid red;
  border-right: 0;
  height: 0;
  width: 0;
}

.Box--left {
  border: 20px solid transparent;
  border-right: 20px solid red;
  border-left: 0;
  height: 0;
  width: 0;
}

.Box--top {
  border: 20px solid transparent;
  border-bottom: 20px solid red;
  border-top: 0;
  height: 0;
  width: 0;
}

.Box--bottom {
  border: 20px solid transparent;
  border-top: 20px solid red;
  border-bottom: 0;
  height: 0;
  width: 0;
}

SassMeister-rendered.html

<div class="Box--right"></div>
<div class="Box--bottom"></div>
<div class="Box--left"></div>
<div class="Box--top"></div>