Полигональные блоки Делаете переполнение содержимого в определенной форме?

Вот сайт, над которым я сейчас работаю: http://willcrichton.net/

Если вы нажмете стрелки на каждой стороне шестиугольника посередине, вы увидите, что он перемещается влево и вправо с помощью jQuery + jQuery Cycle + jQuery Easing. Однако вы также можете видеть, что это довольно уродливо - потому что я использую шестиугольники, а не квадраты, и поскольку div имеют квадратную форму, шестиугольник содержимого неприятным образом перекрывается с фоном.

Итак, мой вопрос: как мне по сути взломать div на шестиугольник? Этот шестиугольник должен быть того же размера / формы, что и div содержимого, и когда содержимое находится за пределами области шестиугольника, оно должно быть невидимым.

Редактировать:

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;
    }

ОБНОВЛЕНИЕ: если вы проверите сайт сейчас, вы увидите мою неудачную попытку использования метода «окна» и поймете, почему z-index не работает.