css – 多边形Divs – 使内容溢出特定形状？

如果单击中间六边形每边的箭头,可以看到它使用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不起作用.