SASS Mixin for Creating CSS Triangles

I feel like one of the most common shapes that we can reliably create with CSS vs images is the triangle.

One of the reasons for this is that it works as far back as IE7 (IE6 works, but doesn't support background-color: transparent). Another is how frequently a little triangle icon can be used (e.g., ascending/descending buttons, expanding menus, open/close state, etc.)

I'm not going to cover the techniques of creating triangles with CSS. That's been done already, and probably better than I would do it.

What I'm going to share with you, is a little SASS mixin that I've been using to generate triangles.

See the Pen SASS Triangles by Thomas Pietrosanti (@Rykus0) on CodePen.

I'm using a SASS placeholder (%triangle-base) as a base to contain the common styles. This makes it easy to extend without generating tons of extra code each time I want to make a triangle. When this compiles, it creates a rule that applies to all of the extending classes (CSS syntax using a comma delimited list of class names).

%triangle-base {
    display: inline-block;
    height:  0;
    width:   0;
    padding: 0;

    overflow: hidden;
    text-indent: 100%;

    border-style: solid;
    border-color: transparent;
}

Output example:

.triangle-n, .triangle-e, .triangle-s, .triangle-w {
    display: inline-block;
    height:  0;
    width:   0;
    padding: 0;

    overflow: hidden;
    text-indent: 100%;

    border-style: solid;
    border-color: transparent;
}

Then I use a mixin for the specific parts, mainly the border-widths and colors. My mixin is preset for 8 different directions, using an abbreviated compass direction. You could change this to suite your style. I am also just using the height/width as the vertical height/width of the bounding box. I plan to, at some point, do the math so that the height/width corresponds to the actual height/width of the triangle.

@mixin triangle( $direction, $color, $width, $height ) {
 @extend %triangle-base;

 @if $direction == 'n' {
  border-width: 0 $width/2 $height;
  border-bottom-color: $color;

 } @else if $direction == 'e' {
  border-width: $width/2 0 $width/2 $height;
  border-left-color: $color;

 } @else if $direction == 's' {
  border-width: $height $width/2 0;
  border-top-color: $color;

 } @else if $direction == 'w' {
  border-width: $width/2 $height $width/2 0;
  border-right-color: $color;

 } @else if $direction == 'ne' {
  border-width: $height 0 0 $width;
  border-top-color: $color;

 } @else if $direction == 'se' {
  border-width: 0 0 $height $width;
  border-bottom-color: $color;

 } @else if $direction == 'sw' {
  border-width: 0 $width $height 0;
  border-bottom-color: $color;

 } @else if $direction == 'nw' {
  border-width: $height $width 0 0;
  border-top-color: $color;

 }
}