Skip to content

Instantly share code, notes, and snippets.

@takashi

takashi/hex.html

Created April 1, 2014 18:04
Show Gist options
  • Save takashi/903518bb251ced2554a6 to your computer and use it in GitHub Desktop.
Save takashi/903518bb251ced2554a6 to your computer and use it in GitHub Desktop.
Download ZIP
hex_box.html
Raw
hex.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="hex">
<a href="" class="hex_wrapper_link">
<div class="hex_parts hex_parts_60"></div>
<div class="hex_parts hex_parts_120"></div>
</a>
</div>
</body>
<style>
.hex {
position: relative;
margin: 200px;
display: inline-block;
width: 190px;
float: none;
background-color: #ee6557;
}
.hex_parts {
position: absolute;
background: inherit;
overflow: hidden;
-webkit-backface-visibility: visible;
height: 100%;
width: 100%;
z-index: -1;
}
.hex_parts:before {
content: '';
position: absolute;
background: inherit;
left: 0;
z-index: -1;
height: 220px;
width: 220px;
}
.hex_parts_60:before {
-webkit-transform: rotate(-60deg) translate(40px, -40px);
-moz-transform: rotate(-60deg) translate(40px, -40px);
-ms-transform: rotate(-60deg) translate(40px, -40px);
-o-transform: rotate(-60deg) translate(40px, -40px);
transform: rotate(-60deg) translate(40px, -40px);
}
.hex_parts_120:before {
-webkit-transform: rotate(-120deg) translate(55px, 15px);
-moz-transform: rotate(-120deg) translate(55px, 15px);
-ms-transform: rotate(-120deg) translate(55px, 15px);
-o-transform: rotate(-120deg) translate(55px, 15px);
transform: rotate(-120deg) translate(55px, 15px);
}
.hex_wrapper_link {
z-index: 10;
height: 110px;
-webkit-background-size: auto 220px;
background-size: auto 220px;
background-position: 50% 50%;
border: none;
display: block;
background-image: url('http://builtbybuffalo.com/uploads/work/300/2006370432.jpg');
}
.hex_parts_60 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex_parts_120 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment