Skip to content

Instantly share code, notes, and snippets.

@alexiscordova
Last active June 12, 2017 15:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexiscordova/474ad796490025e9cf03 to your computer and use it in GitHub Desktop.
Save alexiscordova/474ad796490025e9cf03 to your computer and use it in GitHub Desktop.
Sass mixin to create CSS triangles
@mixin triangle($direction, $size: 0.375rem, $color: #222){
display: block;
position: absolute;
width: 0;
height: 0;
content: '';
@if ($direction == 'up'){
border-right: $size solid transparent;
border-bottom: $size solid $color;
border-left: $size solid transparent;
}
@else if ($direction == 'down'){
border-top: $size solid $color;
border-right: $size solid transparent;
border-left: $size solid transparent;
}
@else if ($direction == 'left'){
border-top: $size solid transparent;
border-right: $size solid $color;
border-bottom: $size solid transparent;
}
@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