六角形のグリッドであるhtmlブロックを設計する方法はありましたか?蜂の巣のそれに似ています。これは、cssスタイリングタスクのように見えます。
傾斜する大きな境界線を使用したり、要素fyiに三角形を作成したりできます。
したがって、上部の三角形、中央のセクション、下部の三角形で<div class="hexagon">
を作成し、複数の六角形を作成できます。
編集:
更新された例: http://jsfiddle.net/rRDby/
完全な六角形ではありませんが、どのように使用できるかがわかります。自分だけで楽しむことができます。
編集#2:Stuはすでに何かを行っているようです@ http://www.cssplay.co.uk/menus/hexagon.html
チェックアウト 2001年からのTantekÇelikの作品 :彼はHTMLとCSSから(他の形状とともに)六角形を生成します。エリック・マイヤーは「スラント」のトピックにも取り組んだ ここ 。 Lasse Reichstein Nielsenには簡単なハウツーがあります および 他の形状を生成するためのウォークスルー これは役に立つかもしれません。
この答えをそこに投げ出すだけです-それが正しいものかどうかは疑わしいですが、OPの言い回しは曖昧であり、正直なところ、他の2つの答えは好きではありません-彼らは不快にハックのように感じます。
「六角形グリッド」が必要な唯一の理由が背景のためである場合は、いくつかの単純なCSS背景タイリングを使用して、通常の六角形グリッドを取得できます。
このようなタイル化可能な画像を撮る:
次に、いくつかの単純なCSSを並べて表示できます。
background: url('hex-tile.png');
そしてそれは「六角形のグリッド」を形成するためにきちんと繰り返されるべきです。 例: http://jsfiddle.net/MqyHv/1/