Гексагональные клетки в html

Есть ли способ создать html-блок, который является шестиугольной сеткой? Как и у ульев пчел. Это больше похоже на задачу стилизации css.

Ответ 1

Вы можете использовать большую границу, которая будет наклонной, и вы можете создавать треугольные фигуры на элементе, fyi.

Пример: http://jsfiddle.net/pAGJG/

Итак, вы можете сделать <div class="hexagon"> с верхним треугольником, средней частью и нижним треугольником и сделать несколько шестиугольников.

EDIT:

Пример: http://jsfiddle.net/rRDby/

Это не идеальный шестиугольник, но он дает вам представление о том, как вы можете его использовать. Вы можете повеселиться всем.

РЕДАКТИРОВАТЬ № 2: Стю, видимо, уже что-то сделал @http://www.cssplay.co.uk/menus/hexagon.html

Ответ 2

Отъезд Tantek Çelik работает с 2001 года: он генерирует шестиугольник (наряду с другими фигурами) из HTML и CSS. Эрик Мейер также затронул тему "slants" здесь. Lasse Reichstein Nielsen имеет простой практический способ, а также прохождение генерации другие формы, которые могут быть полезны.

Ответ 3

Просто собираюсь отбросить этот ответ там - я сомневаюсь, что он правильный, но фраза OP нечеткая, и, честно говоря, мне не нравятся два других ответа - они чувствуют себя неудобно, как хаки.

Если единственная причина, по которой вам нужна "гексагональная сетка", для фона, то вы можете использовать некоторую простую черепицу CSS для получения правильной шестиугольной сетки.

Взяв тканное изображение следующим образом:

Затем вы можете нарисовать простой CSS:

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

и он должен аккуратно повторять форму "гексагональной сетки". Пример: http://jsfiddle.net/MqyHv/1/