hexagonale Zellen in html

Question

Gibt es eine Möglichkeit, einen HTML-Block zu entwerfen, der ein hexagonales Gitter ist? Ähnlich wie bei einem Bienenstock. Dies sieht eher wie eine CSS-Styling-Aufgabe aus.

Answer 1

Sie können einen großen Rahmen verwenden, der geneigt wird, und Sie können dreieckige Formen auf einem Element, fyi, erstellen.

Beispiel: http://jsfiddle.net/pAGJG/

So können Sie ein <div class="hexagon"> mit einem Top-Dreieck bilden, Mittelteil und unterem Dreieck und mehrere Hexagone machen.

EDIT:

Aktualisierte Beispiel: http://jsfiddle.net/rRDby/

Es ist kein perfektes Sechseck, aber es gibt Ihnen eine Vorstellung davon, wie Sie es verwenden können. Sie können den Spaß ganz für sich alleine haben.

EDIT # 2: Stu hat sich offenbar schon etwas getan @http://www.cssplay.co.uk/menus/hexagon.html

Answer 2

Check out Tantek Çelik's work from 2001: er erzeugt ein Sechseck (zusammen mit anderen Formen) von HTML und CSS. Eric Meyer widmete sich auch dem Thema "Schräglagen" here. Lasse Reichstein Nielsen has a straightforward how-to sowie eine walkthrough of generating other shapes, die von Nutzen sein könnte.

Answer 3

Ich werde nur diese Antwort da draußen werfen - ich bezweifle, dass es die richtige ist, aber die OP-Formulierungen sind vage, und ehrlich gesagt mag ich die beiden anderen Antworten nicht - sie fühlen sich unbehaglich wie Hacks.

Wenn der "hexagonale Raster" nur für den Hintergrund benötigt wird, können Sie ein einfaches CSS-Hintergrund-Tiling verwenden, um ein reguläres Hexagon-Raster zu erhalten.

ein kachelbar Bild wie dieses Taking:

Sie können dann Fliese einige einfache CSS:

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

und es sollte ordentlich ein "hexagonalen Gitter" zu bilden, wiederholen. Beispiel: http://jsfiddle.net/MqyHv/1/