Create arrows quickly with a SCSS mixin Raw

arrow.scss

@mixin arrow($direction: 'up', $size: 5px, $color: black) {
	width: 0;
	height: 0;
	
	@if ($direction == 'up') {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid $color;
	} @else if ($direction == 'down') {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size solid $color;
		border-top: $size solid $color;
	} @else if ($direction == 'left') {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right: $size solid $color;
	} @else if ($direction == 'right') {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
	}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Contact GitHub API Training Shop Blog About
© 2017 GitHub, Inc. Terms Privacy Security Status Help