Add triangles to anything!

triangle.scss

// Now you can add triangles to anything!  (^_-)-☆ 
// Just use the @include triangle($color, $position) mixin. 
// Border colors are automatically created based on the bg 
// color you provide, and $position refers to whether the 
// triangle is on 'top' or 'bottom'.
@mixin triangle($bg_color: #fafafa, $direction: top, $vertical-offset: 10px, $horizontal-offset: 15px, $border_color: "") {
  // If no $border_color was passed in, let's set to to a 35% darker version of $bg_color
  @if $border_color == "" {
    $border_color: darken($bg_color, 25%);

    // If no $border_color was passed in, we're going to generate one.
    // So, let's set the parent div's border-color and background-color, too.
    background-color: $bg_color;
    border-color: darken($bg_color, 25%);
  }

  // the border
  &:before { @include triangle-component($border_color, $direction, $vertical-offset+1, $horizontal-offset); }
  // the arrow itself
  &:after { @include triangle-component($bg_color, $direction, $vertical-offset, $horizontal-offset); }
}

// Used by the triangle mixin to make moar triangles!!
@mixin triangle-component($color: #fafafa, $direction: top, $vertical-offset: 10px, $horizontal-offset: 15px) {
  position: absolute;
  z-index: 1;
  @if $direction == top {
    top: -$vertical-offset;
    bottom: auto;
    border-top: 0 solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid $color;
    border-left: 10px solid transparent;
  } @else {
    bottom: -$vertical-offset;
    top: auto;
    border-top: 10px solid $color;
    border-right: 10px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 10px solid transparent;
  }
  width: 0;
  height: 0;
  left: $horizontal-offset;
  content: " ";
}