A mixin to create arrows.

arrows.scss

/**
 * variables:- 
 * @width: horizontal length of arrow.
 * @height: vertical length of arrow.
 * @dir: dirction of arrow. eg. top, right, bottom, left.
 * @bg: color of arrow.
 */

@mixin arrows($width, $height, $dir, $bg) {
  width: $width;
  height: $height;
  overflow: hidden;
  position: relative;
  background: $bg;
  &:before, &:after {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    border-#{$dir}: $width solid #fff;
  }
  @if $dir == top {
    &:before {
      left: -50%;
      border-right: $width/2 solid transparent;
    }
    &:after {
      right: -50%;
      border-left: $width/2 solid transparent;
    }
  }
  @else if $dir == bottom {
    &:before {
      left: -50%;
      border-right: $width/2 solid transparent;
    }
    &:after {
      right: -50%;
      border-left: $width/2 solid transparent;
    }
  }
  @else if $dir == left {
    &:before {
      bottom: -50%;
      border-top: $width/2 solid transparent;
    }
    &:after {
      top: -50%;
      border-bottom: $width/2 solid transparent;
    }
  }
  @else if $dir == right {
    &:before {
      bottom: -50%;
      border-top: $width/2 solid transparent;
    }
    &:after {
      top: -50%;
      border-bottom: $width/2 solid transparent;
    }
  }
}