Skip to content

Instantly share code, notes, and snippets.

@Artistan

Artistan/dabblet.css

Last active August 29, 2015 14:15
Show Gist options
  • Save Artistan/8b5435db47e720f54749 to your computer and use it in GitHub Desktop.
Save Artistan/8b5435db47e720f54749 to your computer and use it in GitHub Desktop.
Download ZIP
Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
Raw
dabblet.css
/**
* Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
* http://stackoverflow.com/q/10062887/1397351
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
.row:first-child { margin-top: 0%; }
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
padding: 5%;}
.hexagon:before, .content:after {
display: block;
position: absolute;
top: 0px;
right: 0;
bottom: 0px;
left: 0;
transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
background-color: rgba(30,144,255,.56);
background-size: cover;
content: '';
}
.content:after { content: attr(data-content); }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='row'>
<div class='hexagon'></div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment