--- /dev/null
+@charset "UTF-8";
+
+/// Generates a triangle pointing in a specified direction.
+///
+/// @argument {string} $direction
+/// The direction the triangle should point. Accepts `up`, `up-right`,
+/// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
+///
+/// @argument {number (with unit)} $width
+/// Width of the triangle.
+///
+/// @argument {number (with unit)} $height
+/// Height of the triangle.
+///
+/// @argument {color} $color
+/// Color of the triangle.
+///
+/// @example scss
+/// .element {
+/// &::before {
+/// @include triangle("up", 2rem, 1rem, #b25c9c);
+/// content: "";
+/// }
+/// }
+///
+/// // CSS Output
+/// .element::before {
+/// border-style: solid;
+/// height: 0;
+/// width: 0;
+/// border-color: transparent transparent #b25c9c;
+/// border-width: 0 1rem 1rem;
+/// content: "";
+/// }
+
+@mixin triangle(
+ $direction,
+ $width,
+ $height,
+ $color
+) {
+ @if not index(
+ "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
+ $direction
+ ) {
+ @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
+ "`down`, `down-left`, `left` or `up-left`.";
+ } @else if not _is-color($color) {
+ @error "`#{$color}` is not a valid color for the `$color` argument in " +
+ "the `triangle` mixin.";
+ } @else {
+ border-style: solid;
+ height: 0;
+ width: 0;
+
+ @if $direction == "up" {
+ border-color: transparent transparent $color;
+ border-width: 0 ($width / 2) $height;
+ } @else if $direction == "up-right" {
+ border-color: transparent $color transparent transparent;
+ border-width: 0 $width $width 0;
+ } @else if $direction == "right" {
+ border-color: transparent transparent transparent $color;
+ border-width: ($height / 2) 0 ($height / 2) $width;
+ } @else if $direction == "down-right" {
+ border-color: transparent transparent $color;
+ border-width: 0 0 $width $width;
+ } @else if $direction == "down" {
+ border-color: $color transparent transparent;
+ border-width: $height ($width / 2) 0;
+ } @else if $direction == "down-left" {
+ border-color: transparent transparent transparent $color;
+ border-width: $width 0 0 $width;
+ } @else if $direction == "left" {
+ border-color: transparent $color transparent transparent;
+ border-width: ($height / 2) $width ($height / 2) 0;
+ } @else if $direction == "up-left" {
+ border-color: $color transparent transparent;
+ border-width: $width $width 0 0;
+ }
+ }
+}