六边形单元格 [英] hexagonal shaped cells in html

问题描述

有没有办法设计一个六边形网格的html块？类似于蜂巢的。这看起来更像一个css造型任务。

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.

推荐答案

你可以使用一个大的边框，在元素上。

You can use a large border which will get slanted and you can make triangular shapes on an element, fyi.

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

因此，您可以使用顶部制作< div class =hexagon> 三角形，中间部分和底部三角形，并创建多个六边形。

So you can make a <div class="hexagon"> with a top triangle, middle section, and bottom triangle, and make multiple hexagons.

编辑：

更新的示例： 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.

编辑＃2 ：Stu显然已经做了一些事情@ http://www.cssplay.co.uk/menus/hexagon.html

EDIT #2: Stu has apparently already done something @ http://www.cssplay.co.uk/menus/hexagon.html

这篇关于六边形单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！