Polygonal Divs——让内容以特定形状溢出？

这是我目前正在开发的网站：http://willcrichton.net/ http://willcrichton.net/

如果单击中间六边形每一侧的箭头，您可以看到它使用 jQuery + jQuery Cycle + jQuery Easing 左右过渡。然而，您也可以看到它相当难看——因为我使用的是六边形而不是正方形，而且因为 div 是方形的，所以内容六边形与背景以一种令人不愉快的方式重叠。

所以，我的问题是：我如何将 div 破解成六边形？该六边形应该与内容 div 的大小/形状相同，并且当内容位于六边形区域之外时，它应该是不可见的。

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:如果您现在检查该站点，您会看到我使用“窗口”方法的失败尝试，并且您可以明白为什么 z 索引不起作用。

您无法将 div 制作成六边形，但您可以使用带有 alpha 透明度的 PNG 文件来遮盖您想要的区域。因此，您需要制作四个 div，每个 div 都有一个背景，其中有一个 PNG 文件，其透明度充当遮罩。这些 div 将通过滑块绝对定位在您的 div 上。

编辑：正如 Pekka 下面指出的，这也可以通过一个大的 PNG 文件作为遮罩来完成。

编辑#2：查看您发布的代码，我将对其进行如下修改：

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

请注意，我关闭了<div id="content">元素。该元素应该是幻灯片的同级元素，但位于具有较高 z-index 的幻灯片上方。或者，如果您的“内容”div 用于其他目的而不仅仅是显示蒙版，则您可能需要创建一个专用于显示蒙版的新元素。