$sizes-are-rem: true; // true = rem | false = px
@function s($size) {  @return if($sizes-are-rem, $size/10#{rem}, $size#{px});}

// Create Arrows/Triangles in any direction.
@mixin arrow($width:20, $height:20, $colour:$red, $direction:right, $sudo:before) {

  $colour: if($colour == null, white, $colour);
  $opposite:($direction);

	&:#{$sudo} { content:""; height:0; width:0; position:absolute; pointer-events:none; border-style:solid; border-color:transparent; border-width:0;
    // Directions
    @if ($direction == "left")         {left:s(-$width);   border-width:s($height/2) s($width) s($height/2) 0; border-right-color:$colour;  top:50%; margin-top:s(-$height/2);  }
    @if ($direction == "right")        {right:s(-$width);  border-width:s($height/2) 0 s($height/2) s($width); border-left-color:$colour;   top:50%; margin-top:s(-$height/2);  }
    @if ($direction == "top")          {top:s(-$height);   border-width:0 s($width/2) s($height) s($width/2);  border-bottom-color:$colour; left:50%; margin-left:s(-$width/2); }
    @if ($direction == "bottom")       {bottom:s(-$height);border-width:s($height) s($width/2) 0 s($width/2);  border-top-color:$colour;    left:50%; margin-left:s(-$width/2); }
	  @if ($opposite  == "top left")     {top:0; left:0;     border-width:s($height) s($width) 0 0;              border-top-color:$colour;		}
		@if ($opposite  == "top right")    {top:0; right:0;    border-width:0 s($width) s($height) 0;              border-right-color:$colour;	}
		@if ($opposite  == "bottom left")  {bottom:0; left:0;  border-width:s($height) 0 0 s($width);              border-left-color:$colour;		}
		@if ($opposite  == "bottom right") {bottom:0; right:0; border-width:0 0 s($height) s($width);              border-bottom-color:$colour;	}
    // Center
    @if(str-index($direction, "center")) { top:50%; left:50%; margin-left:s(-$width/2); margin-top:s(-$height/2); }
    @if ($direction == "center")       {border-width:s($height/2) 0 s($height/2) s($width); border-left-color:$colour; }
    @if ($direction == "center right") {border-width:s($height/2) 0 s($height/2) s($width); border-left-color:$colour; }
    @if ($direction == "center bottom"){border-width:s($height) s($width/2) 0 s($width/2); border-top-color:$colour; }
    @if ($direction == "center left")  {border-width:s($height/2) s($width) s($height/2) 0; border-right-color:$colour; }
    @if ($direction == "center top")   {border-width:0 s($width/2) s($height) s($width/2); border-bottom-color:$colour; }
		@content;
	}
}
body { background-color:black;}
.arrows { width:400px; height:400px; position:relative; margin:0 auto;}
.arrows div { position:relative; width:100px; height:100px; display:inline-block; margin:10px; border:1px dashed white; line-height:100px; color:white; text-align:center; font-size:12px; font-family:arial;}
.arrow-top-left     { @include arrow(30, 30, null, "top left")}
.arrow-top          { @include arrow(30, 30, null, "top")}
.arrow-top-right    { @include arrow(30, 30, null, "top right")}
.arrow-left         { @include arrow(30, 30, null, "left")}
.arrow-center       { @include arrow(30, 30, rgba(blue,0.5), "center")}
.arrow-right        { @include arrow(10, 10, null, "right") { right:s(5);}}
.arrow-bottom-left  { @include arrow(30, 30, null, "bottom left")}
.arrow-bottom       { @include arrow(30, 30, null, "bottom")}
.arrow-bottom-right { @include arrow(30, 30, null, "bottom right")}