SASS Triangle Mixin

index.html

<div class="background">
  <div class="foo">
    <div class="bar">
      Look ma, a triangle!
    </div>
  </div>
</div>

SASS Triangle Mixin.markdown

SASS Triangle Mixin

A Pen by Andrew Houle on CodePen.

License.

style.css

@mixin triangle($direction, $size: 0.375rem, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }
}
.background {
  background: red;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.foo {
  position: absolute;
  width: 50%;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: blue;
  &:after {
    @include triangle(down, 10px, blue);
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -12px;
  }
}
.bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-family: helvetica, sans-serif;
  font-size: 18px;
  padding: 20px;  
  width: 100%;
  box-sizing: border-box;
}