是否有設計六角形網格的html模塊的方法?類似於蜜蜂蜂巢。這看起來更像是一個css樣式任務。html中的六角形單元格
回答
你可以使用一個大的邊框,它會傾斜,你可以在一個元素上做出三角形形狀,fyi。
所以,你可以用一個三角形的頂部,中部和底部三角形<div class="hexagon">
,使多個六邊形。
編輯:
更新了例:http://jsfiddle.net/rRDby/
它不是一個完美的六邊形,但它給你的,你如何使用它的想法。你可以盡情享受這一切。
編輯#2:斯圖顯然已經做了一些@http://www.cssplay.co.uk/menus/hexagon.html
退房Tantek Çelik's work from 2001:他從生成HTML和CSS六邊形(其它形狀一起)。埃裏克邁耶還解決了「傾斜」here的話題。 Lasse Reichstein Nielsen has a straightforward how-to以及walkthrough of generating other shapes這可能是有用的。
只是想拋出這個答案 - 我懷疑這是正確的,但OP的措詞含糊不清,而且我不太喜歡其他兩個答案 - 他們會覺得不合適像黑客。
如果您需要「六邊形網格」的唯一原因是背景,那麼您可以使用一些簡單的CSS背景平鋪來獲得正六邊形網格。
以一個平鋪圖像是這樣的:
然後,您可以平鋪一些簡單的CSS:
background: url('hex-tile.png');
,它應該重複整齊,形成了 「六邊形網格」。 例子:http://jsfiddle.net/MqyHv/1/
..但是如果您需要在每個單元格中放置文本,該怎麼辦?我想這就是問題所在。 – Rich 2013-05-06 14:28:41
- 1. 在六角形區域中選擇鄰居單元格
- 2. HTML中的六角形鏈接
- 3. 在六角形網格中捕捉到最近的六角形中心
- 4. 在六角形網格中創建六角形按鈕的最佳方式
- 5. iPhone Tablview單元格 - 角三角形
- 6. 帶內部文本的HTML六角形
- 7. 向量化六邊形網格中的單元格數
- 8. 非空六邊形的六角中心
- 9. 平頂六角形六角形網格座標以像素座標
- 10. 六角形/形狀中的隨機點
- 11. CSS六角形與內部元素
- 12. R - 繪製六角形棋盤格
- 13. 在六角形網格內移動塊?
- 14. 六角形網格tumblr css代碼
- 15. 居中CSS六角形
- 16. CSS3圓角六角形
- 17. 六角形圖像
- 18. 繪製六角形
- 19. ios中的六角網格
- 20. 單div水平CSS六角形按鈕
- 21. 如何將一個六角形網格變成一個擠壓的六角形網格?
- 22. 沒有五角形的球體上的六邊形網格
- 23. 如何在表格單元格中添加三角形
- 24. 正方形XY網格Hexagon Vertices的六角形標籤
- 25. 如何創建.xml格式的六角形形狀
- 26. 十六進制到六角形速記
- 27. 以六角形的形狀裁剪UIImage?
- 28. 3D六角形地圖
- 29. 試圖學習六角形
- 30. 生成六角形島
此相關的問題[六邊形與標籤格(http://stackoverflow.com/questions/26114920/hexagon-patern-with-img-tag)顯示的方式來實現你的目標。 – 2014-11-26 15:21:57