try this example: http://jsbin.com/ipaked/6 (tested on Fx and Chrome)
relevant CSS
.hexagon {
position: relative;
width: 124px;
height: 100px;
background: #d8d8d8;
}
.hexagon:after,
.hexagon:before {
position: absolute;
content: "";
z-index: 1;
top: 0;
width: 0px;
background: #fff;
border-top: 50px transparent solid;
border-bottom: 50px transparent solid;
}
.hexagon:before {
left: 0;
border-right: 30px #d8d8d8 solid;
}
.hexagon:after {
right: 0;
border-left: 30px #d8d8d8 solid;
}
(Adjust border-width and size of the hexagon so it can look as you prefer.)
As alternative you can also use a single pseudoelement in which you could show the black hexagon unicode character U+2B21
, like in this example: http://jsbin.com/ipaked/7
CSS
.hexagon {
position: relative;
width: 120px;
height: 100px;
line-height: 100px;
text-align: center;
}
.hexagon:before {
position: absolute;
content: "\2B21";
font-size: 160px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
This is probably a better choice (if using a relative font size) so the hexagon can adjust itself when the user increase or decrease the base font-size on his browser.