Skip to content

Instantly share code, notes, and snippets.

@tankred
Created December 12, 2014 21:41
Show Gist options
  • Save tankred/5412c555908c30907502 to your computer and use it in GitHub Desktop.
Save tankred/5412c555908c30907502 to your computer and use it in GitHub Desktop.
css hexagon
<div class="center">
<div class="hex hex-3">
<div class="inner">
<h4>CCS</h4>
<hr />
<p>Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>
body {
background:#1D1F20;
}
.hex {
width:150px;
height:86px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 173px;
position: relative;
float:left;
margin:25px 5px;
text-align:center;
zoom:1;
}
.hex.hex-gap {
margin-left: 86px;
}
.hex a {
display:block;
width: 100%;
height:100%;
text-indent:-9999em;
position:absolute;
top:0;
left:0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: inherit;
z-index:-2;
overflow:hidden;
backface-visibility: hidden;
}
.hex .corner-1 {
z-index:-1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
width: 173px;
height: 173px;
content: '';
position: absolute;
background: inherit;
top:0;
left: 0;
z-index: 1;
background: inherit;
background-repeat:no-repeat;
backface-visibility: hidden;
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom:0;
}
/* Custom styles*/
.hex .inner {
color:#eee;
}
.hex h4 {
font-family: 'Josefin Sans', sans-serif;
margin:0;
}
.hex hr {
border:0;
border-top:1px solid #eee;
width:60%;
margin:15px auto;
}
.hex p {
font-size:16px;
font-family: 'Kotta One', serif;
width:80%;
margin:0 auto;
}
.hex.hex-1 {
background: #74cddb;
}
.hex.hex-2 {
background: #f5c53c;
}
.hex.hex-3 {
background: #80b971;
}
.center {
/* [1] */
position: absolute;
left: 50%;
top: 50%;
/* [2] */
transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment