Generated by SassMeister.com.

SassMeister-input-HTML.html

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

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$num:0;
*{margin:$num;padding:$num;}
@mixin arrow($dir:top , $bordersize:10px , $color:green){
  width:0;
  height:0;
  @if $dir == top {
     border-bottom:$bordersize solid $color;
     border-left:$bordersize solid transparent;
     border-right:$bordersize solid transparent;
  }@else if $dir == right {
     border-left:$bordersize solid $color;
     border-top:$bordersize solid transparent;
     border-bottom:$bordersize solid transparent;
  }@else if $dir == bottom {
     border-top:$bordersize solid $color;
     border-left:$bordersize solid transparent;
     border-right:$bordersize solid transparent;
  }@else {
     border-right:$bordersize solid $color;
     border-top:$bordersize solid transparent;
     border-bottom:$bordersize solid transparent;
  }
}
.example-top {
  @include arrow(top , 20px , #f00);
}
.example-right {
  @include arrow(right , 30px , green);
}
.example-bottom {
  @include arrow(bottom , 40px , blue);
}
.example-left {
  @include arrow(left , 10px , #ff00aa);
}

SassMeister-output.css

* {
  margin: 0;
  padding: 0;
}

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

.example-right {
  width: 0;
  height: 0;
  border-left: 30px solid green;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}

.example-bottom {
  width: 0;
  height: 0;
  border-top: 40px solid blue;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

.example-left {
  width: 0;
  height: 0;
  border-right: 10px solid #ff00aa;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

SassMeister-rendered.html

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