SCSS Triangle - SCSS Mixing for Create Triangle - SCSS Arrow

The triangle/Arrow is one of the most used components, if you are developing any website or application you need a arrow icon so you must create a SCSS @mixin for all direction arrow. 

Below is the SCSS mixin for generating arrow for each direction.

	@mixin triangle($direction, $size, $color) {
	width: 0;
	height: 0;
	@if $direction == 'up' {
	border-left: em($size) solid transparent;
	border-right: em($size) solid transparent;
	border-bottom: em($size) solid $color;
	}
	@else if $direction == 'down' {
	border-left: em($size) solid transparent;
	border-right: em($size) solid transparent;
	border-top: em($size) solid $color;
	}
	@else if $direction == 'right' {
	border-top: em($size) solid transparent;
	border-bottom: em($size) solid transparent;
	border-left: em($size) solid $color;
	}
	@else if $direction == 'left' {
	border-top: em($size) solid transparent;
	border-bottom: em($size) solid transparent;
	border-right: em($size) solid $color;
	}
	}

view raw triangle.scss hosted with ❤ by GitHub