pues miren aquí les dejo el código que hice para un hexágono pero no se porque no me funciona, además no se como hacer para repetir varios hexágonos a modo de tablero:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background: #222222;
}
.centrado {
width: 200px;
margin: auto;
margin-top: -50px;
}
.hexagon {
width: 200px;
height: 400px;
overflow: hidden;
visibility: hidden;
transform: rotate(120deg);
display: inline-block;
list-style-type: none;
}
.hexagon-in1 {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
transform: rotate(-60deg);
}
.hexagon-in2 {
display: block;
width: 100%;
height: 100%;
visibility: visible;
overflow:hidden;
transform: rotate(-60deg);
background: #c0c0c0;
transform: rotate(-60deg);
transition: 1.5s ease-out;
}
<!--.hexagon-in2:hover {
background: #00ffff;
}-->
</style>
</head>
<body>
<div class="centrado">
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2"></div>
</div>
</div>
</div>
</body>
</html>
Saludos y muchas gracias por la ayuda