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>

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

Answer 2

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

例如：

1。具有现有背景的图层

2。带有灰色六边形的图层

3。包含周围单词和周围背景的图层

就像那样，当你点击左右箭头时，灰色的六边形会让我在1.和3.层的中间滑动，从而防止你提到的那种丑陋：）

希望它有所帮助！

Answer 3

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

多边形分区 - 使内容溢出特定形状？

3 个答案: