这是我目前正在处理的网站：
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不起作用.
解决方法
您不能将div设为六边形,但可以使用带有Alpha透明度的PNG文件来遮盖您想要的区域.因此,您需要制作四个div,每个div都有一个背景,其中PNG文件的透明度充当遮罩.使用滑块将这些div绝对定位在div上.
编辑：正如下面的Pekka所说,这也可以通过一个大的PNG文件作为掩码来完成.
<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用于除显示蒙版之外的其他目的,您可能需要创建专用于显示蒙版的新元素.
