Создание CSS стрелок из элемента

arrow.scss

@mixin arrow($dir: 'down', $size: 4px, $color: #000) {
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;

	@if ($dir == 'up' or $dir == 'down') {
		border-left-width: $size;
		border-right-width: $size;
	}

	@if ($dir == 'right' or $dir == 'left') {
		border-top-width: $size;
		border-bottom-width: $size;
	}

	@if ($dir == 'up') {
		border-bottom-width: $size;
		border-bottom-color: $color;
	}

	@if ($dir == 'down') {
		border-top-width: $size;
		border-top-color: $color;
	}

	@if ($dir == 'right') {
		border-left-width: $size;
		border-left-color: $color;
	}

	@if ($dir == 'left') {
		border-right-width: $size;
		border-right-color: $color;
	}
}