Polygonal Divs -- Making content overflow in a specific shape?

Question

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.

Edit:

HTML

<div id="content"> 
<div class="slide">

    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

    <div id="websites-title"></div>
    <div class="website">

    </div>
</div>
<div class="slide">
    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

</div></div>


<script type="text/javascript">
    $("#content").cycle({
        fx: 'scrollHorz',
        timeout: 0,
        prev: ".left",
        next: ".right",
        easing: "easeInOutBack"
    });
</script>

CSS

/* Container styles */

#container {
    width: 908px;
    height: 787px;
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -393.5px;
    margin-left: -452px;
    background-image: url("images/background.png");
    font: 12px "Lucida Sans Unicode", "Arial", sans-serif;
    z-index: 3;
}    

#content {
    width: 686px;
    height: 598px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -282px;
    margin-left: -343.5px;
    /*background-image: url("images/hacky_hole2.png");*/
    z-index: 1;
}

    .slide {
        width: 100%;
        height: 100%;
        background-image: url("images/content.png");
        position: relative;
        z-index: 2;
    }

UPDATE: If you check the site now, you'd see my failed attempt at using the "window" method and you can see why the z-index did not work.

Answer 1

You can't make a div into a hexagon, but you could use PNG files with alpha transparencies to mask the area you want. So, you would need to make four divs, each with a background that has a PNG file with the transparency that acts as a mask. These divs would be positioned absolutely over your div with the slider.

EDIT: As Pekka noted below, this could also be done with a single, large PNG file acting as a mask.

EDIT #2: Looking at the code you posted, I would revise it like this:

<div id="content"></div>
<div class="slide">

    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

    <div id="websites-title"></div>
    <div class="website">

    </div>
</div>
<div class="slide">
    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>
</div>

Note that I closed the <div id="content"> element. This element should be a sibling of your slides, but be positioned above the slides with a higher z-index. Or, you may need to create a new element dedicated to displaying the mask, if your "content" div is used for other purposes than just displaying the mask.

Answer 2

If it was me developing, I would make that two layer link of yours, into a tree layer...

ex:

1. Layer with the existing background

2. Layer with the gray hexagon

3. Layer with the surrounding words and the surrounding background

Like that, when you click the left and right arrows, the gray hexagon will me sliding in the middle of the 1. and 3. layers, thus preventing that ugliness that you've mentioned :)

Hope it helps!

Answer 3

Eric Meyer's curvelicious concept and demo might point you in the right direction. It's a complicated hack from the "early days of CSS", but it's a powerful technique.