Foros del Web » Creando para Internet » CSS »

Dibujar hexágono y repetirlo a modo de tablero

 Estas en el tema de Dibujar hexágono y repetirlo a modo de tablero en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/08/2013, 18:43
 
Fecha de Ingreso: agosto-2013
Mensajes: 4
Antigüedad: 11 años, 3 meses
Puntos: 0
Dibujar hexágono y repetirlo a modo de tablero
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
  #2 (permalink)  
Antiguo 20/08/2013, 20:39
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
  
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 8 meses
Puntos: 1329
Respuesta: Dibujar hexágono y repetirlo a modo de tablero
Mírate esto: http://jtauber.github.io/articles/css-hexagon.html


Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 25/08/2013, 08:47
 
Fecha de Ingreso: agosto-2013
Mensajes: 4
Antigüedad: 11 años, 3 meses
Puntos: 0
Exclamación Dibujar un hexágono grande y centrado relleno de hexágonos
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
  #4 (permalink)  
Antiguo 26/08/2013, 02:40
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Dibujar un hexágono grande y centrado relleno de hexágonos
¿Para qué lo vas a necesitar? ¿Simplemente como fondo o para algo más?
  #5 (permalink)  
Antiguo 26/08/2013, 07:06
 
Fecha de Ingreso: agosto-2013
Mensajes: 4
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Dibujar un hexágono grande y centrado relleno de hexágonos
es para un tablero, que bien se podría usar en un juego o para decorar como fondo de pantalla.

un saludo
  #6 (permalink)  
Antiguo 26/08/2013, 12:18
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
  
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 8 meses
Puntos: 1329
Respuesta: Dibujar un hexágono grande y centrado relleno de hexágonos
¿Por que no sigues os temas que abres: http://www.forosdelweb.com/f53/dibuj...blero-1070200/ ?
__________________
Grupo Telegram Docker en Español

Etiquetas: dibujar, grande, hover, html, modo, relleno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:46.