Hexagons!

by jcubed111

HTML

<div class='hexagonParent'>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <br/>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <br/>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <br/>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <div class='hexagon'></div>
    <br/>
</div>

CSS

.hexagonParent{
    font-size:0;
}

.hexagon{
    width:150px;
    height:87px;
    background:#000;
    display:inline-block;
    margin-top:46px;
    position:relative;
    margin-right:4px;
    margin-left:0;
}

.hexagon:before{
    content:"";
    font-size:0;
    border-bottom:43px solid #000;
    border-left:75px solid transparent;
    border-right:75px solid transparent;
    border-top:0px solid transparent;
    position:absolute;
    top:-43px;
}

.hexagon:after{
    content:"";
    font-size:0;
    border-top:43px solid #000;
    border-left:75px solid transparent;
    border-right:75px solid transparent;
    border-bottom:0px solid transparent;
    position:absolute;
    top:87px;
}

.hexagon:nth-of-type(8n+5){
    margin-left:77px;
}