css - HTMLの六角形のセル

Question

六角形のグリッドである html ブロッ​​クを設計する方法はありますか? 蜂の巣に似ています。これは、CSS スタイリング タスクのように見えます。

Answer 1

斜めになる大きな境界線を使用でき、要素に三角形を作成できます。

例: http://jsfiddle.net/pAGJG/

<div class="hexagon">上三角、中三角、下三角で作ったり、複数の六角形を作ることができます。

編集：

更新された例: http://jsfiddle.net/rRDby/

完全な六角形ではありませんが、どのように使用できるかがわかります。独り占めできます。

編集 #2 : Stu は明らかに何かを既に行っています @ http://www.cssplay.co.uk/menus/hexagon.html

Answer 2

2001 年の Tantek Çelik の作品をチェックしてください。彼は HTML と CSS から (他の形状と共に) 六角形を生成します。Eric Meyer はまた、ここで「傾斜」のトピックを取り上げました。 Lasse Reichstein Nielsen には、簡単なハウツーと、役立つ可能性のある他の形状を生成するためのウォークスルーがあります。

Answer 3

この答えをそこに放り出すだけです-それが正しいとは思えませんが、OPの言い回しは曖昧であり、正直なところ、他の2つの答えは好きではありません-ハックのように不快に感じます.

「六角形グリッド」が必要な唯一の理由が背景のためである場合は、単純な CSS バックグラウンド タイルを使用して正六角形グリッドを取得できます。

次のようなタイル可能な画像を取得します。

次に、いくつかの単純な CSS を並べて表示できます。

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

「六角形のグリッド」を形成するためにきれいに繰り返す必要があります。例: http://jsfiddle.net/MqyHv/1/