Skip to content

Instantly share code, notes, and snippets.

@simon-engledew

simon-engledew/index.html

Created June 2, 2015 13:36
Show Gist options
  • Save simon-engledew/53ea4a12e1fec2e5b124 to your computer and use it in GitHub Desktop.
Save simon-engledew/53ea4a12e1fec2e5b124 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Hexagons
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.grid {
overflow: auto;
height: 100%;
width: 100%;
}
.row {
white-space: nowrap;
}
.hex {
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex {
background: red;
height: 100px;
width: 100px;
display:inline-block;
*display:inline;zoom:1;
vertical-align: top;
padding: 0;
margin: 0;
margin-bottom: -25px;
}
.row:nth-of-type(2n) .hex {
transform: translateX(50%);
}
.row .hex:nth-of-type(2n) {
background: blue;
}
.row:nth-of-type(2n) .hex:nth-of-type(2n) {
background: green;
}
.row:nth-of-type(2n) .hex:nth-of-type(2n+1) {
background: yellow;
}
.hex:hover {
background: orange !important;
z-index: 2;
}
</style>
</head>
<body>
<div class="grid">
<div class="row">
<div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div>
</div>
<div class="row">
<div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div>
</div>
<div class="row">
<div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div>
</div>
<div class="row">
<div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div>
</div>
<div class="row">
<div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div><div class='hex'></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment