hola necesito que me ayuden a dibujar un hexágono grande de relleno de hexágonos , como si fuese un tablero , les dejo el código que tengo(NO ESTA HECHO EN FORMA DE TABLERO):
Código HTML:
<html>
<head>
<title></title>
<style>
body{
background: #222222;
}
.grid{
margin:0 auto 0 auto;
width:1200px;
text-align:left;
}
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
</style>
</head>
<body>
<div style="width: auto; height: auto; margin: 0 auto;">
<div class ="grid">
<div class="hex-row">
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
</div>
<div class="hex-row even">
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
</div>
<div class="hex-row">
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
</div>
<div class="hex-row even">
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
</div>
</div>
</div>
</body>
</html> GRACIAS . UN SALUDO