css – 多边形Divs – 使内容溢出特定形状？

这是我目前正在处理的网站： 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不起作用.

解决方法

您不能将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用于除显示蒙版之外的其他目的,您可能需要创建专用于显示蒙版的新元素.