多边形Div - 使内容在特定形状中溢出？ [英] Polygonal Divs -- Making content overflow in a specific shape?

问题描述

以下是我目前正在处理的网站： http://willcrichton.net/

Here is the site I'm currently working on: http://willcrichton.net/

如果点击中间六边形两边的箭头，你可以看到它使用jQuery + jQuery Cycle + jQuery Easing向左和向右过渡。然而，你也可以看到它是相当丑陋 - 因为我使用六边形而不是正方形，因为div是正方形，内容六边形与背景以令人不快的方式重叠。

If you click on the arrows on each side of the hexagon in the middle, you can see that it transitions left and right using jQuery + jQuery Cycle + jQuery Easing. However, you can also see that it is rather ugly -- because I'm using hexagons and not squares and because divs are square shaped, the content hexagon overlaps with with the background in an unpleasant way.

所以，我的问题是：我怎么会把div变成六边形？该六边形应该与内容div的大小/形状相同，并且当内容超出六边形的区域时，它应该是不可见的。

So, my question is: how would I essentially hack a div into a hexagon? That hexagon should be the same size/shape of the content div, and when content is outside the area of the hexagon it should be invisible.

编辑：

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;
    }

UPDATE：如果现在检查网站，窗口方法，你可以看到为什么z-index不起作用。

UPDATE: If you check the site now, you'd see my failed attempt at using the "window" method and you can see why the z-index did not work.

推荐答案

六边形，但您可以使用PNG文件与alpha透明胶片掩盖您想要的区域。所以，你需要制作四个div，每个都有一个PNG文件的透明度作为一个掩码的背景。这些div将被放置在你的div和滑块之间。

You can't make a div into a hexagon, but you could use PNG files with alpha transparencies to mask the area you want. So, you would need to make four divs, each with a background that has a PNG file with the transparency that acts as a mask. These divs would be positioned absolutely over your div with the slider.

编辑：如下面Pekka所说，这也可以用一个大的PNG文件面具。

As Pekka noted below, this could also be done with a single, large PNG file acting as a mask.

编辑＃2：看看你发布的代码，我会这样修改：

EDIT #2: Looking at the code you posted, I would revise it like this:

<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的幻灯片之上。或者，如果您的contentdiv用于其他目的，而不仅仅是显示掩码，您可能需要创建一个专用于显示掩码的新元素。

Note that I closed the <div id="content"> element. This element should be a sibling of your slides, but be positioned above the slides with a higher z-index. Or, you may need to create a new element dedicated to displaying the mask, if your "content" div is used for other purposes than just displaying the mask.

这篇关于多边形Div - 使内容在特定形状中溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！