Sass-mixin for creating arrows with CSS. This version doesn't take oldIE into account. There is another version which asks for modern browser or oldIE.

b-a.scss

// adds all necessary items to :before or :after (hence b-a) to create elements with CSS, such as triangles
// top, left, bottom, right shall be added directly to the rule
// $ba == before or after
@mixin b-a($ba:before, $border-width: 10px, $padding: $border-width * 1.5, $border-side: left, $top-position: 0, $position-side: $border-side, $position-side-distance: 0, $border-color: #000) {
    $seladd : ":";
    padding-#{$border-side}: $padding;
	
	position: relative;
	&#{$seladd+$ba} {
		content: ""; 
		display: block; 
		width: 0; height: 0; 
		border: $border-width solid transparent; 
		border-#{$border-side}-color: $border-color;
		position: absolute;
		top: $top-position;
		#{$position-side}: $position-side-distance;  	
	}
}

.arrow {
  	@include b-a();
	display: inline-block;
	margin-right: 20px;
}