Triangle

Type: Mixin

@include triangle();

* You can call mixins with or without gls- namespace (e.g. @include gls-triangle();).

Triangle Sass mixin helps you to generate triangles by using ::before or ::after CSS pseudo-elements.

Tip: Works best with the text based elements to point a direction to make user take action (e.g. dropdown menu labels). Especially very useful when you apply it to the selected element’s ::before or ::after pseudo-elements.

Github Source Code

Arguments

Name	Type	Description
`$direction`	`string`	Sets the direction of the triangle. Accepts `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left` values.
`$color`	`color`	The color of the triangle.
`$size`	`number (with unit)`	The size of the triangle. Multiple values must be seperated by space.

* When you pass top, right, bottom, left values for $direction argument you can pass two values to resize the triangle. The first value controls the width of the triangle while the second controls the height.

Examples

Suppose you have an expandable box and you want users to click a label to expand it! Let’s apply the mixin to the ::after pseudo-element of the selected element.

<div class="element">Click here to expand it!</div>

.element {
  &::after {
    @include triangle;
  }
}

//CSS Output
.element::after {
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  border-style: solid;
  border-color: black transparent transparent;
  border-width: 8px 5px 0;
}

Click here to expand it!

Now let’s change the $color and the $size of the triangle, and seperate it from the text by passing a decleration block into the mixin.

.element {
  &::after {
    @include triangle(
      $color: crimson,
      $size: 6px
    ) {
      margin-left: 6px;
    };
  }
}

//CSS Output
.element::after {
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  border-style: solid;
  border-color: crimson transparent transparent;
  border-width: 6px 3px 0;
  margin-left: 6px;
}

Click here to expand it!

When you pass one of the top, right, bottom or left values for $direction argument, you can pass secondary value to resize the triangle. First value controls the width of the triangle and the second is for height.

.element{
  &::after {
    @include triangle(
      $direction: "bottom",
      $color: crimson,
      $size: 10px 6px
    ) {
      position: relative;
      margin-left: 6px;
      top: -2px;
    };
  }
}

//CSS Output
.element::after {
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  border-style: solid;
  border-color: crimson transparent transparent;
  border-width: 6px 5px 0;
  position: relative;
  margin-left: 6px;
  top: -2px;
}

Click here to expand it!

You can apply the mixin not only to the pseudo-elements but to the selected element’s itself.

.element{
  @include triangle(
    $direction: "top",
    $color: crimson,
    $size: 100px 50px
  )
}

//CSS Output
.element {
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent crimson;
  border-width: 0 50px 50px;
}