多边形Div -- 如何使内容溢出特定形状？

Question

多边形Div -- 如何使内容溢出特定形状？

8

这是我目前正在工作的网站：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 {
    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不起作用。

- Will

对于您的hacky_hole2.png图层，您的z-index需要高于幻灯片图层。数字越大，z-index堆栈中的位置越高。 - Jeff Fohl

3个回答

1

如果是我在开发，我会将你的两层链接变成三层的树形结构...

例如：

1. 具有现有背景的层

2. 具有灰色六边形的层

3. 带有周围文字和周围背景的层

这样，当您单击左右箭头时，灰色六边形将滑动到1和3层的中间位置，从而避免了您提到的丑陋问题 :)

希望这能帮到您！

- Zuul

1

Eric Meyer的curvelicious概念和演示可能会指引你朝着正确的方向前进。这是一个来自“CSS早期”的复杂技巧，但它是一种强大的技术。

- kevingessner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Fohl · Accepted Answer

您无法将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 值。或者，如果你的 "content" div 除了显示 mask 之外还用于其他目的，则可能需要创建一个新的元素专门用于显示 mask。