celdas con forma hexagonal en html

Question

¿Había alguna manera de diseñar un bloque html que sea una cuadrícula hexagonal? Similar a la de una colmena de abejas. Esto se parece más a una tarea de diseño css.

Answer 1

Puede usar un borde grande que se inclinará y puede hacer formas triangulares en un elemento, fyi.

Ejemplo: http://jsfiddle.net/pAGJG/

para que pueda tomar una <div class="hexagon"> con un triángulo superior, parte media, y el triángulo inferior, y hacer múltiples hexágonos.

EDIT:

ejemplo Actualizado: http://jsfiddle.net/rRDby/

No es un hexágono perfecto pero te da una idea de cómo puede utilizarlo. Puedes divertirte solo.

editar # 2: Stu al parecer ya ha hecho algo @http://www.cssplay.co.uk/menus/hexagon.html

Answer 2

Salida Tantek Çelik's work from 2001: se genera un hexágono (junto con otras formas) de HTML y CSS. Eric Meyer también abordó el tema de "inclinaciones" here. Lasse Reichstein Nielsen has a straightforward how-to, así como un walkthrough of generating other shapes que podría ser de utilidad.

Answer 3

Sólo voy a arrojar esta respuesta por ahí, dudo que sea la correcta, pero el fraseo del OP es vago, y la verdad es que no me gustan las otras dos respuestas, se sienten incómodamente como hacks.

Si la única razón por la que necesita la "cuadrícula hexagonal" es para el fondo, entonces puede usar un mosaico simple de fondo CSS para obtener una cuadrícula hexagonal regular.

Tomando una imagen enlosables así:

A continuación, puede baldosas poco de CSS simple:

background: url('hex-tile.png'); 

y se debe repetir cuidadosamente para formar una "rejilla hexagonal". Ejemplo: http://jsfiddle.net/MqyHv/1/