Polygonal Divs - 使内容以特定形状溢出？答案

【问题标题】：Polygonal Divs -- Making content overflow in a specific shape?Polygonal Divs - 使内容以特定形状溢出？
【发布时间】：2010-06-03 06:42:10
【问题描述】：

这是我目前正在开发的网站：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

/* 容器样式 */

＃容器 {
    宽度：908px；
    高度：787px；
    左：50%；
    最高：50%；
    位置：绝对；
    边距顶部：-393.5px；
    左边距：-452px；
    背景图像：url（“图像/背景.png”）；
    字体：12px "Lucida Sans Unicode", "Arial", sans-serif;
    z指数：3；
}

＃内容 {
    宽度：686px；
    高度：598px；
    位置：绝对；
    左：50%；
    最高：50%；
    边距顶部：-282px；
    左边距：-343.5px；
    /*背景图片: url("images/hacky_hole2.png");*/
    z-index：1；
}

    。滑动 {
        宽度：100%；
        高度：100%；
        背景图像：url（“图像/内容.png”）；
        位置：相对；
        z指数：2；
    }

更新：如果您现在查看该网站，您会看到我尝试使用“window”方法失败，并且您可以看到 z-index 不起作用的原因。

【问题讨论】：

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

标签： css html shape

【解决方案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 用于其他目的而不只是显示掩码，您可能需要创建一个专用于显示掩码的新元素。

【讨论】：

我尝试过类似的解决方案，但由于某种原因，当我使用 z-index 将窗口定位在内容上方时，它不起作用。知道为什么/任何替代方案吗？
问题是那些 PNG 会有一个可见区域，即蒙版。您实际上必须将现在可见的整个六边形放入 PNG 中，并在中间留下一个洞。这会起作用，但它不是很灵活（不是说我会有更好的主意......）
确保元素绝对定位，使用position:absolute。您还需要确保父元素具有属性position:relative，因此这些元素都相对于同一个父元素定位。然后，当然，请确保您的 z-indexes 按您想要的顺序堆叠您的元素。如果您发布一些代码，我可以看看它。
@Pekka - 是的，这是一种选择。您也可以只使用要阻止下面滑块的六边形部分。所以，这将是六边形的一个方面。
@Jeff mmm，看看六边形外面的空白。你也必须掩盖它，否则滑动内容将在那里可见......我真的想不出一种方法来做到这一点，除了在一个图像中拥有完整的六边形区域。当然，我可能是错的。

【解决方案2】：

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

例如：

1.具有现有背景的图层

2.灰色六边形图层

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

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

希望对你有帮助！

【讨论】：

【解决方案3】：

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

【讨论】：