Hexagon layout

by Jesse Florig

HTML

<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
</div>
<div class="alt">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
</div>
<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Regular_polygon_6.svg/200px-Regular_polygon_6.svg.png"/>
</div>

CSS

div{
    width:800px;
    margin-bottom:-41px;            
}
div.alt{
    position:relative;
    left:-81px;
}
img{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    margin-right:-45px;
}