kendraowolves
New Member
I found a great stackoverflow answer on how to create a hexagonal patten using CSS. Generate repeating hexagonal pattern with CSS3It's almost perfect, except i'd like to flip the hexagons the other way (ie. so the point is at the top). I've managed to do this fairly easily by swapping the main hex div width/height: (hexrow > div)... however i'm really struggling to re-align the background image on the other supporting divs. I've been trying to figure it out for a while now without much success. Could anyone possibly post a jsFiddle that shows how it's done? This is where i'm at currently: What i've tried..and i believe this is what i need to amend: \[code\].hexrow > div > div:first-of-type:before { content: ''; position: absolute; width: 200px; /* width of main + margin sizing */ height: 100%; background-image: inherit; background-position: 0 0; background-repeat: no-repeat; background-size: 120% auto; bottom: 0; left: 0; z-index: 1; -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */ -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */ -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */ -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */ transform:rotate(-60deg) translate(-150px, 0); -ms-transform-origin: 0 0; /* IE 9 */ -webkit-transform-origin: 0 0; /* Safari and Chrome */ -moz-transform-origin: 0 0; /* Firefox */ -o-transform-origin: 0 0; /* Opera */ transform-origin: 0 0;}\[/code\]Any help much appreciated.