<h1>A collection of CSS only arrows.</h1>

<div class="explanation">
  <p>Here we have a collection of CSS only arrows created using borders only.</p>
</div>

<div class="example">
  <div class="arrow up"></div>
  <div class="arrow down"></div>
  <div class="arrow left"></div>
  <div class="arrow right"></div>
  <div class="arrow downLeft"></div>
  <div class="arrow upRight"></div>
  <div class="arrow upLeft"></div>
  <div class="arrow downRight"></div>
</div>

@mixin arrow($type:null, $size:"14px", $color:"#000") {
  
  width: 0;
  height: 0;
  $size: unquote($size);
  $color: unquote($color);
  
  @if $type=="up" {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  }
  @elseif $type=="down" {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
  }
  @elseif $type=="left" {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }
  @elseif $type=="right" {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }
  @elseif $type=="downLeft" {
    border-top: $size solid transparent;
    border-bottom: 0 solid transparent;
    border-left: $size solid $color;
    border-right: 0 solid $color;
  }
  @elseif $type=="downRight" {
    border-top: $size solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 0 solid $color;
    border-right: $size solid $color;
  }
  @elseif $type=="upLeft" {
    border-top: 0 solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    border-right: 0 solid $color;
  }
  @elseif $type=="upRight" {
    border-top: 0 solid transparent;
    border-bottom: $size solid transparent;
    border-left: 0 solid $color;
    border-right: $size solid $color;
  }
}

.arrow {
  margin: 10px;
  float: left;
  &.up {
    @include arrow("up");
  }
  &.down {
    @include arrow("down");
  }
  &.left {
    @include arrow("left");
  }
  &.right {
    @include arrow("right");
  }
  &.downLeft {
    @include arrow("downLeft");
  }
  &.downRight {
    @include arrow("downRight");
  }
  &.upLeft {
    @include arrow("upLeft", "50px", "#c92228");
  }
  &.upRight {
    @include arrow("upRight");
  }
}

/* For aesthetics only ------------------------------------------*/

body {
  margin: 0;
  font-family: Segoe,
    "Segoe UI",
    "DejaVu Sans",
    "Trebuchet MS",
    Verdana,
    sans-serif;
}

h1 {
  font: 200 1.2em "Segoe UI Light",
    "DejaVu Sans",
    "Trebuchet MS",
    Verdana,
    sans-serif;
  font-weight: 200;
  color: #fff;
  background: #039be4;
  padding: 20px;
  margin: 0;
  border-bottom: 10px solid #ccc;
  strong {
    font-family: "Segoe UI Black";
    font-weight: normal;
  }
}

.explanation {
  padding: 20px 40px;
  float: right;
  background: #e64a19;
  -webkit-box-shadow: inset 0 30px 3px 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
  border-bottom: 10px solid #ccc;
  max-width: 300px;
  p {
    color: #fff;
    font-size: 0.8rem;
  }
}