Клетки гексагональной формы в HTML

Question

Был ли способ спроектировать HTML-блок, который является гексагональной сеткой? Похож на пчелиный улей. Это больше похоже на задачу стилей CSS.

Answer 1

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

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

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

РЕДАКТИРОВАТЬ:

Обновленный пример: http://jsfiddle.net/rRDby/

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

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

Answer 2

Посмотрите на работу Тантека Челика с 2001 года: он генерирует шестиугольник (наряду с другими фигурами) из HTML и CSS. Эрик Мейер также обратился к теме "косых" здесь. У Лассе Рейхштейна Нильсена есть простое практическое руководство, а также пошаговое руководство по созданию других форм, которые могут быть полезны.

Answer 3

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

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

Принимая мозаичное изображение, как это:

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

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

и это должно повторяться аккуратно, чтобы сформировать "шестиугольную сетку". Пример: http://jsfiddle.net/MqyHv/1/