CSS html中的六边形单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3637613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hexagonal shaped cells in html
提问by Abu
Is there was a way to design a html block that is a hexagonal grid? Similar to that of a Bee hive. This looks more like a css styling task.
有没有办法设计一个六边形网格的html块？类似于蜂巢。这看起来更像是一个 css 样式任务。
回答by meder omuraliev
You can use a large border which will get slanted and you can make triangular shapes on an element, fyi.
您可以使用会倾斜的大边框，您可以在元素上制作三角形，仅供参考。
Example: http://jsfiddle.net/pAGJG/
示例：http: //jsfiddle.net/pAGJG/
So you can make a <div class="hexagon">with a top triangle, middle section, and bottom triangle, and make multiple hexagons.
所以你可以<div class="hexagon">用一个顶部三角形、中间部分和底部三角形制作一个，并制作多个六边形。
EDIT:
编辑：
Updated example: http://jsfiddle.net/rRDby/
更新示例：http: //jsfiddle.net/rRDby/
It isn't a perfect hexagon but it gives you an idea of how you can use it. You can have the fun all to yourself.
它不是一个完美的六边形，但它可以让您了解如何使用它。你可以尽情享受自己的乐趣。
EDIT #2: Stu has apparently already done something @ http://www.cssplay.co.uk/menus/hexagon.html
编辑 #2：Stu 显然已经做了一些事情@ http://www.cssplay.co.uk/menus/hexagon.html
回答by Cal Jacobson
Check out Tantek ?elik's work from 2001: he generates a hexagon (along with other shapes) from HTML and CSS. Eric Meyer also addressed the topic of "slants" here. Lasse Reichstein Nielsen has a straightforward how-toas well as a walkthrough of generating other shapeswhich might be of use.
查看Tantek ?elik 2001 年的工作：他从 HTML 和 CSS 生成了一个六边形（以及其他形状）。埃里克迈耶还讨论了“倾斜”的话题在这里。 Lasse Reichstein Nielsen 有一个简单的操作方法以及生成可能有用的其他形状的演练。
回答by Yi Jiang
Just going to throw this answer out there - I doubt it's the correct one, but the OP's phrasing is vague, and truthfully I don't like the other two answers - they feel uncomfortably like hacks.
只是想把这个答案扔在那里 - 我怀疑它是正确的，但 OP 的措辞含糊不清，老实说我不喜欢其他两个答案 - 他们感觉像黑客一样不舒服。
If the only reason you need the "hexagonal grid" is for the background, then the you can use some simple CSS background tiling to get a regular hexagon grid.
如果您需要“六边形网格”的唯一原因是用于背景，那么您可以使用一些简单的 CSS 背景平铺来获得规则的六边形网格。
Taking a tileable image like this:
拍摄这样的平铺图像：
You can then tile some simple CSS:
然后你可以平铺一些简单的 CSS：
background: url('hex-tile.png');
and it should repeat neatly to form a "hexagonal grid". Example: http://jsfiddle.net/MqyHv/1/
它应该整齐地重复以形成“六边形网格”。示例：http: //jsfiddle.net/MqyHv/1/
