html中的六角形單元格

Question

是否有設計六角形網格的html模塊的方法？類似於蜜蜂蜂巢。這看起來更像是一個css樣式任務。

Answer 1

你可以使用一個大的邊框，它會傾斜，你可以在一個元素上做出三角形形狀，fyi。

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

所以，你可以用一個三角形的頂部，中部和底部三角形<div class="hexagon">，使多個六邊形。

編輯：

更新了例：http://jsfiddle.net/rRDby/

它不是一個完美的六邊形，但它給你的，你如何使用它的想法。你可以盡情享受這一切。

編輯＃2：斯圖顯然已經做了一些@http://www.cssplay.co.uk/menus/hexagon.html

Answer 2

退房Tantek Çelik's work from 2001：他從生成HTML和CSS六邊形（其它形狀一起）。埃裏克邁耶還解決了「傾斜」here的話題。 Lasse Reichstein Nielsen has a straightforward how-to以及walkthrough of generating other shapes這可能是有用的。

Answer 3

只是想拋出這個答案 - 我懷疑這是正確的，但OP的措詞含糊不清，而且我不太喜歡其他兩個答案 - 他們會覺得不合適像黑客。

如果您需要「六邊形網格」的唯一原因是背景，那麼您可以使用一些簡單的CSS背景平鋪來獲得正六邊形網格。

以一個平鋪圖像是這樣的：

然後，您可以平鋪一些簡單的CSS：

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

，它應該重複整齊，形成了 「六邊形網格」。 例子：http://jsfiddle.net/MqyHv/1/