构建 css3 六边形时的疯狂 z-index

Question

这是 HTML 代码

<div class="row">
    <div class="hex">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

还有 CSS3

*{
    margin: 0;
    padding: 0;
    border: none;
}

body{
    padding: 100px;
}

.hex{
    width: 180px;
    height: 102px;
    background: url('http://ob-a.com/img/2014/05/hd-nature-4398-wallpapers-1920x1080-4398.jpg') no-repeat;
    background-size: 180%;
    background-position: 0 50%;
    position: relative;
    zoom: 1;
}

.top, .bottom{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    overflow: hidden;
}

.top{
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.bottom{
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.top:before, .bottom:before{
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    background: inherit;    
    top: 0;
    left: 0;    
}

.top:before{
    -webkit-transform: rotate(-60deg) translate(0, -50%);
    -moz-transform: rotate(-60deg) translate(0, -50%);
    -ms-transform: rotate(-60deg) translate(0, -50%);
    -o-transform: rotate(-60deg) translate(0, -50%);
    transform: rotate(-60deg) translate(0, -50%);
    background-position: 0 0;   
}

.bottom:before{
    -webkit-transform: rotate(60deg) translate(0, 50%);
    -moz-transform: rotate(60deg) translate(0, 50%);
    -ms-transform: rotate(60deg) translate(0, 50%);
    -o-transform: rotate(60deg) translate(0, 50%);
    transform: rotate(60deg) translate(0, 50%);
    background-position: 0 100%;    
}

还有jsFiddle link

z-index 中的问题及其上下文。我已经将 z-index 设置为.bottom 和.top，设置为.bottom:before 和.top:before，并且不同......当我删除overflow:hidden; 时，“图片”会发生变化。但是当我设置 overflow: hidden; 时，我知道 z-index 上下文有效。我该怎么办？目的是用图像创建六边形。无法理解出了什么问题。请大家帮忙，谢谢大家。

Answer 1

jsFiddle link for demo

<div>
    <div class="box-8"></div>
    <div class="box-9"></div>
    <div class="box-10"></div>
</div>


.box-8{width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.box-9{
width: 104px;
height: 60px;
background-color: #6C6;
}
.box-10{
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}

More info

Answer 2

谢谢大家，我解决了这个细节。这听起来很神奇，但所有这些都适用于宽度和高度、宽度背景大小和背景位置的精确数学计数......有些奇怪，但它有效。 这是链接： http://jsfiddle.net/Beq9D/10/

代码：

<div class="row">
    <div class="hex">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
    border: none;
}

body{
    padding: 200px;
}

.hex{
    width:150px;
    height:86px;
    background: url('http://ob-a.com/img/2014/05/hd-nature-4398-wallpapers-1920x1080-4398.jpg') no-repeat;
    background-size: auto 173px;
    background-position: 50% 50%;
    position: relative;
    zoom: 1;
}

.top, .bottom{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    overflow: hidden;
}

.top{
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

.bottom{
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.top:before, .bottom:before{
    width: 173px;
    height: 173px;
    content: '';
    position: absolute;
    background: inherit;    
    top: 0;
    left: 0;    
}

body .top:before{
    -webkit-transform: rotate(-60deg) translate(-87px, 0px);
    -moz-transform: rotate(-60deg) translate(-87px, 0px);
    -ms-transform: rotate(-60deg) translate(-87px, 0px);
    -o-transform: rotate(-60deg) translate(-87px, 0px);
    transform: rotate(-60deg) translate(-87px, 0px);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}

body .hex .bottom:before{
    -webkit-transform: rotate(60deg) translate(-48px, -11px);
    -moz-transform: rotate(60deg) translate(-48px, -11px);
    -ms-transform: rotate(60deg) translate(-48px, -11px);
    -o-transform: rotate(60deg) translate(-48px, -11px);
    transform: rotate(60deg) translate(-48px, -11px);
}

本教程后我可以理解它，也许它可以帮助其他人 http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3