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

Question

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

Answer 1

您无法将 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>

请注意，我关闭了

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

Answer 2

如果是我开发，我会把你的两层链接变成树层......

例如：

1.与现有背景图层

2. 灰色六边形图层

3.与周围的文字和周围的背景分层

就像这样，当您单击左右箭头，灰色六边形将使我在第 1 层和第 3 层中间滑动，从而防止您提到的丑陋:)

希望它有帮助！

Answer 3

Eric Meyer 的 curvelicious 概念和演示可能会为您指明正确的方向。这是“CSS 早期”的复杂技巧，但它是一项强大的技术。