Here is the site I'm currently working on: http://willcrichton.net/

If you click on the arrows on each side of the hexagon in the middle, you can see that it transitions left and right using jQuery + jQuery Cycle + jQuery Easing. However, you can also see that it is rather ugly -- because I'm using hexagons and not squares and because divs are square shaped, the content hexagon overlaps with with the background in an unpleasant way.

So, my question is: how would I essentially hack a div into a hexagon? That hexagon should be the same size/shape of the content div, and when content is outside the area of the hexagon it should be invisible.