/* An element in the shape of a triangle
 * $base Width of the border at the base of the triangle (i.e. border opposite direction)
 * $left Width of the border to the left of the base
 * $right Width of the border to the right of the base
 * $dir Direction of the primary apex of the triangle [top|right|bottom|left]
 * $colour Colour of the shape
 */
@mixin triangle($base: 1, $left: 1, $right: 1, $colour: black, $dir: top) {
  // Possible triangle orientations
  $dirs: (
    top: (bottom, left, right),
    right: (left, top, bottom),
    bottom: (top, right, left),
    left: (right, bottom, top)
  );
  
  // Check if a correct orientation has been passed
  @if map-has-key($dirs, $dir) {} @else {
    @error "@mixin triangle requires a valid direction. E.g. top, right, bottom, left";
  }
  
  width: 0;
  height: 0;
  border-#{nth(map-get($dirs, $dir), 1)}: $base solid $colour;
  border-#{nth(map-get($dirs, $dir), 2)}: $left solid transparent;
  border-#{nth(map-get($dirs, $dir), 3)}: $right solid transparent;
}

/* Cross-vendor border radius
 */
@mixin border-radius($val: 0) {
  -webkit-border-radius: $val;
     -moz-border-radius: $val;
       -o-border-radius: $val;
          border-radius: $val;
}

/* For making a curly bracket around a dom element - only one mind
 * $radius Radius of the bend at the curly parts of the bracket
 * $w Width of the bracket path
 * $h Height of the middle outward segment
 * $colour Colour of the bracket
 * $bg Background colour of the parent element(s)
 * $dir Which side of the element to add bracket [top|bottom]
 * @note Target element must be careful with the ::before/::after pseudo elements.
 */
@mixin curly-brackets($radius, $w, $h, $colour, $bg, $dir) {
  // Check if a correct orientation has been passed
  @if $dir == top or $dir == right or $dir == bottom or $dir == left {} @else {
    @error "@mixin curly-brackets requires a valid direction. E.g. top, right, bottom, left";
  }
  
  width: 100%;
  height: 3 * $radius / 2;
  border-#{$dir}: $w solid $colour;
  @include border-radius($radius);
  position: relative;
  
  &::before, &::after {
    content: "";
    margin: auto;
    position: absolute;
    @if $dir == top or $dir == bottom { left: 0; right: 0; }
    @if $dir == right or $dir == left { top: 0; bottom: 0; }
  }
  
  &::before {
    #{$dir}: -$h - $w / 2;
    @include triangle($h, $h, $h, $colour, $dir);
  }
  
  &::after {
    #{$dir}: -$h + $w;
    @include triangle($h, $h, $h, $bg, $dir);
  }
}

/* Example usage
 */

$bracket-colour: red;
$bg-colour: white;
$dirs: top right bottom left;

@each $dir in $dirs {
  .curly-bracket-#{$dir} {
    @include curly-brackets(9px, 3px, 12px, $bracket-colour, $bg-colour, #{$dir});
  }
}

.example {
  width: 128px;
  height: 96px;
  margin: 12px;
  padding: 12px;
  display: inline-block;
  vertical-align: middle;
}

body { text-align: center; }