body{
  background: #2F3238;
}


/* align to center and middle...blah blah... */
html { display:table; height:100%; margin:0 auto; }
body { display:table-cell; vertical-align:middle; }


.hex {
  position:relative;
  width:10em;
  height:7em;
  color:#000;
  background:#000000;
}
.hex .hex-tex {
  position:absolute;
  top:100%; left:100%;
  margin:-3em 0 0 -3.9em;
  font:700 200%/.8 'Helvetica Neue',Helvetica,Arial,sans-serif;
  letter-spacing:-.05em;
}
.hex:before,.hex:after {
  content:' ';
  position:absolute;
  left:0; right:0;
  width:0; height:0;
  border-left:5em solid transparent;
  border-right:5em solid transparent;
}
.hex:before { bottom:100%;border-bottom:2em solid #000000; }
.hex:after { top:100%;border-top:2em solid #000000; }