Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CSS Triangles SCSS Mixin #css #scss #triangle #mixin
//==== 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";
Copy link

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.

Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment