A mixin that helps you create borders with triangles sticking out of the side

_border_triangle.css.scss

//  Generates the css for a border with a triangle set along it
//
//  $side is the border side (left, right, top, bottom)
//  $width is the border's width
//  $style is the border's style
//  $color is the border/triangle color
//  $size is the size of the triangle
//    it takes one or two values: width and height
//  $offset is how far down the border the triangle should sit
//  $direction is how the triangle should face
//    up, down, left, right, up-right, up-left, down-right, down-left, inset-up, inset-down, inset-left, inset-right
//
//
//   Copyright (C) 2014 Turn4 LLC
//
//   This program is free software: you can redistribute it and/or modify
//   it under the terms of the GNU General Public License as published by
//   the Free Software Foundation, either version 3 of the License, or
//   (at your option) any later version.
//
//   This program is distributed in the hope that it will be useful,
//   but WITHOUT ANY WARRANTY; without even the implied warranty of
//   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//   GNU General Public License for more details.
//
//   You should have received a copy of the GNU General Public License
//   along with this program.  If not, see <http://www.gnu.org/licenses/>.

@mixin border-triangle($side, $width, $style, $color, $size, $offset, $direction) {
  border-#{$side}:$width $style $color;
  position:relative;

  &::before {
    position:absolute;
    content:'';
    @include triangle($size, $color, $direction);

    @if ($side == left) {
      left:0;
      top:$offset;
      @if ($direction == inset-right) {
        margin-top:-$size;
      }
      @else {
        margin-top:-$size/2;
      }
    }
    @else if ($side == right) {
      right:-$size * 2;
      bottom:$offset;
      margin-bottom:-$size;
    }
    @else if ($side == top) {
      top:0;
      left:$offset;
      margin-left:-$size/2;
    }
    @else if ($side == bottom) {
      bottom:-(if(length($size) > 1, nth($size,2), $size/2 + $width));
      left:$offset;
      margin-left:-$size/2;
    }
  }
}