ячейки шестиугольной формы в html [дубликаты]

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

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

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

ИЗМЕНИТЬ:

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

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

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

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

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

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

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

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

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

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