gistfile1.sass

= triangle( $direction, $bg-color, $border-color, $border-width, $top, $left, $width: 10px, $arrow-from: 'top' )
  position: relative
  // creates "border" or outer triangle
  &:before
    @if $border-width > 0
      content: "\00a0"
      display: block 
      // reduce the damage in FF3.0 
      position: absolute
      width: 0
      height: 0
      @if $arrow-from == 'bottom'
        top: auto
        bottom: $top - $width
      @else
        bottom: auto
        top: $top
      left: $left 
      // value = - border-left-width - border-right-width 
      
      border-width: floor($width / 2)
      border-style: solid

      @if $direction == 'south'
        border-color: $border-color transparent transparent transparent
      @if $direction == 'north'
        border-color: transparent transparent $border-color transparent
      @if $direction == 'east'
        border-color: transparent transparent transparent $border-color
      @if $direction == 'west'
        border-color: transparent $border-color transparent transparent

  // creates the smaller inner triangle
  &:after
    content: "\00a0"
    display: block 

    position: absolute
    width: 0
    height: 0

    @if $direction == 'south'
      @if $arrow-from == 'bottom'
        bottom: $top + $border-width - $width
      @else
        top: $top - $border-width
    @else if $direction == 'north'
      @if $arrow-from == 'bottom'
        bottom: $top - $border-width  + $width
      @else
        top: $top + $border-width
    @else
      @if $arrow-from == 'bottom'
        bottom: $top
      @else
        top: $top

    @if $direction == 'east'
      left: $left - $border-width
    @else if $direction == 'west'
      left: $left + $border-width
    @else
      left: $left
      
    @if $arrow-from == 'bottom'
      top: auto
    @else
      bottom: auto
      
    border-width: floor($width / 2)
    border-style: solid

    @if $direction == 'south'
      border-color: $bg-color transparent transparent transparent
    @if $direction == 'north'
      border-color: transparent transparent $bg-color transparent
    @if $direction == 'east'
      border-color: transparent transparent transparent $bg-color
    @if $direction == 'west'
      border-color: transparent $bg-color transparent transparent