Responsive triangle mixin (up / down)

responsive_triangle_mixin.scss

// Triangle

@mixin triangle($dir, $size: 50%, $color: currentcolor) {
	$base: null;

	@if $dir == 'up' {
		$base: bottom;
	}
	@else if $dir == 'down' {
		$base: top;
	}

	position: absolute;
	width: $size;
	height: $size * 1.6;
	left: (100% - $size) / 2;
	padding-left: $size / 2;
	padding-#{$base}: $size / 2;
	overflow: hidden;

	&::after {
		content: '';
		display: block;
		width: 0;
		height: 0;

		margin-left: -500px;
		@if $dir == 'down' {
			margin-top: -500px;
		}

		border-left: 500px solid transparent;
		border-right: 500px solid transparent;
		border-#{$base}: 500px solid $color;
	}
}