Stylus CSS arrows made easy

gistfile1.css

/**
 * Create an arrow on the element using before and after pseudo selectors.
 *
 * Example: 
 *
 * .tooltip
 *   arrow('right', 20px, 15px, #CCC, #FFF, 1)
 * 
 * Display an arrow right of the element 20 pixels from the top. The border
 * is grey colored and 1 pixel wide. If the background color matches the
 * parents color it will look like the arrow originates from the parent.
 *      
 * Works in all major browser, but IE 6 and 7.
 *       
 * @param string side which side to show the star
 * @param integer offset from the top or left dependant on side (pixels)
 * @param integer size of arrow (pixels)
 * @param string border color
 * @param string background color
 * @param integer width of the border
 * @return markup for attached to parent
 */
arrow(side, offset, size, border, background, width)
  // Transpose the sides, right arrow requires left border etc.
  if side is 'right'
    side = 'left'
    pos = left 100% top 0
  else if side is 'left'
    side = 'right'
    pos = right 100% top 0
  else if side is 'top'
    side = 'bottom'
    pos = left 0 bottom 100%
  else if side is 'bottom'
    side = 'top'
    pos = left 0 top 100%
    
  sides = side is 'left' or side is 'right' ? 1 : 0
  
  &:before
  &:after
    absolute: pos
    height: 0
    width: 0
    content: ' '
  
  &:before
    {sides ? 'top' : 'left'}: offset
    border: size solid transparent
    border-{side}-color: border
    
  &:after
    {sides ? 'top' : 'left'}: offset
    border: (size - width) solid transparent
    border-{side}-color: background

I believe the background arrow isn't centered at least it's not for me. Adding:

&:after
    margin-{sides ? 'top' : 'left'}: width

seems to fix this.

I also let the arguments inherit from their parent selector's css or gave them common properties so that you have to pass fewer variables.

arrow(side = 'left'
    , size = 10px
    , offset = 0
    , border-width = 1px
    , border-color = inherit
    , background = @background-color or @background)

Now, in most cases I can just provide a position and size

arrow('bottom', 10px)