Миксины для создания CSS стрелок и шевронов

triangles.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;
	}
}


@mixin arrow-after($dir: 'down', $size: 4px, $color: #000) {
	&::after {
		content: '';
		display: inline-block;
		@include arrow($dir, $size, $color);
	}
}

@mixin arrow-before($dir: 'up', $size: 4px, $color: #000) {
	&::before {
		content: '';
		display: inline-block;
		@include arrow($dir, $size, $color);
	}
}


// top-left, top-right, bottom-left, bottom-right
@mixin chevron($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
	width: 0;
	height: 0;

	@if ($dir == 'top-left' or $dir == 'top-right') {
		border-top: $height solid $color;
	}

	@if ($dir == 'bottom-left' or $dir == 'bottom-right') {
		border-bottom: $height solid $color;
	}

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

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


@mixin chevron-after($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
	&::after {
		content: '';
		display: inline-block;
		@include chevron($dir, $height, $width, $color);
	}
}


@mixin chevron-before($dir: 'top-left', $height: 40px, $width: 40px, $color: #000) {
	&::before {
		content: '';
		display: inline-block;
		@include chevron($dir, $height, $width, $color);
	}
}