SCSS Arrow Please Mixin – append arrow to any element with ease.

_css-arrow.scss

/* 	!SCSS Arrow Please Mixin – append arrow to any element with ease.   
	Inspired by http://cssarrowplease.com  
	Copyleft: John Grishin (@exah)
	
	Usage:  
	1. Import mixin in your SCSS file: @import "_css-arrow.scss"; 
	2. Write in your rule: @include arrow($direction, $width, $bg-color, [$border-color], [$border-width]);
	
	Direction parameters: top, bottom, left, right.  
	
	Examples: 
	@include arrow(top, 5px, #333);
	@include arrow(bottom, 10px, #3f425e, #636896, 5px);
*/

@mixin arrow($direction, $width, $bg-color, $border-color: none, $border-width: none) {
  position: relative;
  
	&:after, &:before {
	
		@if $direction == top {
			bottom: 100%;
		} @else if $direction == right {
			left: 100%;
		} @else if $direction == left {
			right: 100%;
		} @else if $direction == bottom {
			top: 100%;
		}
		
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

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

	}
	
	@if ($border-color != none) and ($border-width != none) {
		
		&:before {
			border-color: rgba($border-color, 0);
			border-width: $width + round($border-width * 1.41421356);

			@if $direction == top {

				border-bottom-color: $border-color;
			} @else if $direction == right {
				top: 50%;
				margin-top: -($width + round($border-width * 1.41421356));
				border-left-color: $border-color;
			} @else if $direction == left {
				top: 50%;
				margin-top: -($width + round($border-width * 1.41421356));
				border-right-color: $border-color;
			} @else if $direction == bottom {
				left: 50%;
				margin-left: -($width + round($border-width * 1.41421356));
				border-top-color: $border-color;
			}
		}
	}
}