Kevin Carmody: machines, media & miscellanea

Elsewhere: Mastodon, Github, Email

Arrownd variable size div arrows

One of our designers has a love for putting variable size arrows on navigation lists. This is really easy to do in Photoshop but a damn nightmare to build. However, I felt bad that saying it was something we couldn't really do. I mean, coming up with solutions is our thing right?! So I made a jQuery plugin called Arrownd.

  • item
  • multi line item
  • item
The options are as follows
options = {
    'position'    : 'top', // top, bottom, left, right
    'arrowDepth'  : 10,
    'radius'      : 5,
    'lineWidth'   : 1,
    'lineColour'  : '', // hex value
    'fillColour'  : '#5CB78E'