<!-- 
  Grab The Code:
  https://github.com/jerrylow/css-arrow-mixin
-->

<div class="page">
  <!-- Top: Outside -->
  <div class="arrow arrow--1">
    Lorem Ipsum
  </div>
  
  <!-- Right: Outside -->
  <div class="arrow arrow--2">
    Lorem Ipsum
  </div>
  
  <!-- Left: Outside -->
  <div class="arrow arrow--3">
    Lorem Ipsum
  </div>
  
  <!-- Bottom: Outside -->
  <div class="arrow arrow--4">
    Lorem Ipsum
  </div>
  
  <!-- No Border -->
  <div class="arrow arrow--5">
    Lorem Ipsum
  </div>
  
  <!-- Top: Inside -->
  <div class="arrow arrow--6">
    Lorem Ipsum
  </div>
  
  <!-- Right: Inside -->
  <div class="arrow arrow--7">
    Lorem Ipsum
  </div>
  
  <!-- Left: Inside -->
  <div class="arrow arrow--8">
    Lorem Ipsum
  </div>
  
  <!-- Bottom: Inside -->
  <div class="arrow arrow--9">
    Lorem Ipsum
  </div>
  
  <!-- No Border Inside -->
  <div class="arrow arrow--10">
    Lorem Ipsum
  </div>
</div>

@mixin css-arrow($height: 10px, $border: 2px, $color: #efefef, $border-color: #999, $direction: bottom, $outside: true) {
  $border-shift: $border;
  
  @if $border > 0px {
    $border: round($border * 1.41421356);
  }
  
  position: relative;
  
  &:after,
  &:before {
    border: solid transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    pointer-events: none;
    width: 0;
    
    @if $direction == top {
      @if $outside {
        bottom: 100%;
      }
      @else {
        margin-top: -$border-shift;
        top: 0;
      }
    }
    @if $direction == right {
      @if $outside {
        left: 100%;
      }
      @else {
        margin-right: -$border-shift;
        right: 0;
      }
    }
    @if $direction == bottom {
      @if $outside {
        top: 100%;
      }
      @else {
        bottom: 0; 
        margin-bottom: -$border-shift;  
      }
    }
    @if $direction == left {
      @if $outside {
        right: 100%;
      }
      @else {
        left: 0;
        margin-left: -$border-shift;
      }
    }
  }

  &:after {
    border-color: rgba(255, 255, 255, 0);
    @if $direction == top {
      @if $outside {
        border-bottom-color: $color;
      }
      @else {
        border-top-color: $color;
      }
    }
    @if $direction == right {
      @if $outside {
        border-left-color: $color;
      }
      @else {
        border-right-color: $color;
      }
    }
    @if $direction == bottom {
      @if $outside {
        border-top-color: $color;
      }
      @else {
        border-bottom-color: $color;
      }
    }
    @if $direction == left {
      @if $outside {
        border-right-color: $color;
      }
      @else {
        border-left-color: $color;
      }
    }
    
    @if $direction == top or $direction == bottom {
      left: 50%;
      margin-left: -$height;
    }
    
    @if $direction == left or $direction == right {
      top: 50%;
      margin-top: -$height;
    }
    
    border-width: $height;
  }

  &:before {
    border-color: rgba(255, 255, 255, 0);
    @if $direction == top {
      @if $outside {
        border-bottom-color: $border-color;
      }
      @else {
        border-top-color: $border-color;
      }
    }
    @if $direction == right {
      @if $outside {
        border-left-color: $border-color;
      }
      @else {
        border-right-color: $border-color;
      }
    }
    @if $direction == bottom {
      @if $outside {
        border-top-color: $border-color;
      }
      @else {
        border-bottom-color: $border-color;
      }
    }
    @if $direction == left {
      @if $outside {
        border-right-color: $border-color;
      }
      @else {
        border-left-color: $border-color;
      }
    }
    
    @if $direction == top or $direction == bottom {
      left: 50%;
      margin-left: -($height + $border);
    }
    
    @if $direction == left or $direction == right {
      top: 50%;
      margin-top: -($height + $border);
    }
    
    border-width: $height + $border;
  }
}

// Variables
$background: #c8e7f1;
$border-color:  #97d4e8;
$border-size: 3px;

body {
  background: #f8f8f8;
}

.page {
  padding: 50px;
}

.arrow {
  border: $border-size solid $border-color;
  border-radius: 4px;
  background: $background;
  color: #2d7187;
  margin: 0 auto 40px;
  padding: 20px;
  text-align: center;
  width: 200px;
}

.arrow--1 {
  @include css-arrow(10px, $border-size, $background, $border-color, top);
}

.arrow--2 {
  @include css-arrow(10px, $border-size, $background, $border-color, right);
}

.arrow--3 {
  @include css-arrow(10px, $border-size, $background, $border-color, bottom);
}

.arrow--4 {
  @include css-arrow(10px, $border-size, $background, $border-color, left);
}

.arrow--5 {
  @include css-arrow(10px, 0, $background);
  border: none;
}

.arrow--6 {
  @include css-arrow(10px, $border-size, #f8f8f8, $border-color, top, false);
}

.arrow--7 {
  @include css-arrow(10px, $border-size, #f8f8f8, $border-color, right, false);
}

.arrow--8 {
  @include css-arrow(10px, $border-size, #f8f8f8, $border-color, bottom, false);
}

.arrow--9 {
  @include css-arrow(10px, $border-size, #f8f8f8, $border-color, left, false);
}

.arrow--10 {
  @include css-arrow(10px, 0, #f8f8f8, none, bottom, false);
  border: none;
}