Apply pointer mixin. Applies CSS3 arrows to an element.

apply-pointer.scss

/*
  Apply pointer mixin. Uses a CSS3 pseudo element to apply a triangle.
  https://gist.github.com/brianmcallister/2932442
  
  @param {String} [$side] Which side the pointer should stick out from. Defaults to top.
  @param {String} [$size] Size of the pointer. Expects units, ex: 5px. Defaults to 5px.
  @param {String} [$color] Color of the pointer. Defaults to white.
  @param {String} [$type] Which kind of triange to make. Defaults to equilateral.
  @param {Boolean} [$clockwise] If using a right triange, the direction the triange should be rotated.
  @param {String} [$element] Which type of psuedo element to be used. Defaults to :after.
*/
@mixin apply-pointer($side: 'top', $size: 5px, $color: white, $type: 'equilateral', $clockwise: true, $element: 'after') {
  $opposite: opposite-position($side);
  $rotated: '';
  $negative: $size * -1;
  $double: $size * -2;
  
  // Default to relative. This can be overwritten in the
  // rule that's calling this mixin.
  position: relative;
  
  &:#{$element} {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-color: transparent;
    border-#{$opposite}-color: $color;
    border-width: $size;
    
    // Set some default positioning.
    // This can be overwritten in the @content.
    @if $side == 'top' {
      margin-left: $negative;
      top: $double;
      left: 50%;
    } @else if $side == 'right' {
      margin-top: $negative;
      top: 50%;
      right: $double;
    } @else if $side == 'bottom' {
      margin-left: $negative;
      bottom: $double;
      left: 50%;
    } @else if $side == 'left' {
      margin-top: $size * -1;
      top: 50%;
      left: $size * -2;
    }
    
    // Determine which direction the right triangle arrow should face.
    @if $type == 'right' {
      @if $side == 'top' {
        $rotated: if($clockwise, 'right', 'left');
      } @else if $side == 'right' {
        $rotated: if($clockwise, 'bottom', 'top');
      } @else if $side == 'bottom' {
        $rotated: if($clockwise, 'right', 'left');
      } @else if $side == 'left' {
        $rotated: if($clockwise, 'top', 'bottom');
      }
      
      border-#{$rotated}-width: 0;      
    } @else if $type != 'equilateral' {
      @warn 'apply-pointer(): Unknown triangle type. Using "equilateral".';
    }
    
    @content;
  }
}

usage.scss

@include apply-pointer('bottom', 6px, $primary, 'right', false) {
  top: 17px;
  left: 9px;
}

And an example of how I'm using this and what it looks like. usage.scss is code I'm really using on a project I'm working on.

http://cl.ly/1W382t1L1I2s2o3y3z18