crazy z-index in building css3 hexagon

Question

Here is HTML code

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

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

And the jsFiddle link

The problems in z-index, with it context. I have already set z-index to .bottom and .top, to .bottom:before and .top:before, and different... When I delete overflow:hidden; the "picture" changes. But when I set overflow: hidden; I understand that there works z-index context. What can I to do with this? The purpose is to create hexagon with image. Can't understand what's wrong. Please help, I'll thanx to everyone.

I'd suggest taking a look at this question http://stackoverflow.com/questions/19418486/css3-hexagon-shape-with-a-border-outline — Josh Crozier, Mar 08 '14 at 07:30
I think idea with second inner block is interesting, I'll work on it, thanx. — Aziz, Mar 08 '14 at 14:34

Ravi Patel · Answer 1 · 2014-03-08T08:05:55.387

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

enter image description here

More info

edited Mar 08 '14 at 08:05

answered Mar 08 '14 at 07:52

Ravi Patel

5,121
2
25
44

Sorry, man, but it's only shape. I want to create hexagon with image inside, like a block. Nevertheless thanx! – Aziz Mar 08 '14 at 14:30

score 0 · Answer 2 · answered Mar 09 '14 at 05:51

Thanx to all, I solved this details. It sounds magic, but all work with exact math counts with width and height, width background-size and background-position... Some strange, but it works. Here is link: http://jsfiddle.net/Beq9D/10/

The code:

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

I can understand it after this tutorial, maybe it can help somebody else http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3

crazy z-index in building css3 hexagon

2 Answers2