CSS Triangles SCSS Mixin #css #scss #triangle #mixin

css-triangle.scss

//==== Simple SCSS mixin to create CSS triangles
//==== Example: @include css-triangle ("up", 10px, #fff);
@mixin css-triangle ($direction: "down", $size: 20px, $color: #000) {
	width: 0; 
	height: 0;
	border-left: $size solid #{setTriangleColor($direction, "left", $color)};
	border-right: $size solid #{setTriangleColor($direction, "right", $color)};
	border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
	border-top: $size solid #{setTriangleColor($direction, "top", $color)};
}

//Utility function to return the relevant colour depending on what type of arrow it is
@function setTriangleColor($direction, $side, $color) {

	@if $direction == "left" and $side == "right" 
	or  $direction == "right" and $side == "left" 
	or $direction == "down" and $side == "top" 
	or $direction == "up" and $side == "bottom" {
		@return $color
	} @else {
		@return "transparent";
	}

}

you could say change border-left to setTriangleColor($direction, "right", $color)

and then your function could be

@if $direction == $side
@return $color

not as semantic (probably want to use something other than $side), but certainly cleans up the function really well.

Hey! This is awesome! I recently needed a stretched-out triangle so I forked this and changed the mixin (an added a function) so the width and height of the triangle could be different. Check it out if you're interested! Thanks!