@mixin arrow($color, $width)

arrow.scss

/*
HTML: <img class="arrow" src="<?= $wg->BlankImgUrl ?>" />
SASS: .arrow { @include arrow(); }
*/
@mixin arrow($width: 4px, $color: black, $direction: 'down') {
	border-color: transparent;

	// Fixes the 'jagged line' problem for modern browsers
	// See: http://css-tricks.com/snippets/css/css-triangle/#comment-108252
	border-color: rgba($color, 0);
	border-width: $width;

	// Fixes the 'thin stroke of grey' on border edges in Firefox
	// See: http://css-tricks.com/snippets/css/css-triangle/#comment-103509
	border-style: inset;
	height: 0;

	// Center vertically with the surrounding line
	vertical-align: middle;
	width: 0;

	@if ($direction == 'down') {
		border-bottom: 0;
		border-top-color: $color;
		border-top-style: solid;

	} @else if ($direction == 'left') {
		border-left: 0;
		border-right-color: $color;
		border-right-style: solid;

	} @else if ($direction == 'right') {
		border-left-color: $color;
		border-left-style: solid;
		border-right: 0;

	} @else if ($direction == 'up') {
		border-bottom-color: $color;
		border-bottom-style: solid;
		border-top: 0;
	}
}

Todo: apply to img only. Don't use classes for directions, use a param.