Как создать такую сетку из ромбов?

Question

[Альберт Рашитов]

Здравствуйте. Посоветуйте, как создать вот такую сетку из ромбов.

Answer 1

[Виталий Киренков]

А функциональность какая то нужная?

1. Самый простой и быстрый - свг - отрисовать в Illustrator-е и экспортнуть.
2. Лично я вижу набор из треугольников, а не ромбов. И можно это собрать из абсолютно спозиционированных элементов. В этом случаем вам нужно будет копать в сторону "CSS-треугольников".

Comments

[Юрий Лобанов]

@DeLaVega судя по курсору — функциональность нужна.

[Виталий Киренков]

@iiil Может у дизайнера просто рука дёрнулась и он там завалялся?))

[Альберт Рашитов]

ответил ниже.

[Виталий Киренков]

@albert_rar тогда определённо svg.
Элементы сможете обернуть в и будет работать переход. Можете ещё замарочиться с raphael.js, но не думаю, что в этом будет необходимость.

[Виталий Киренков]

a xlink:href="link.html" /a

Answer 2

[Алексей]

Как-то так
Верстал таблицами под Opera 22
Про кроссбраузерность речи не было :)

Надо с углами поиграться

Comments

[h8nor]

На FF.30 показывает )

[Алексей]

я так прикинул, в последних версиях многих браузеров отображается нормально

Answer 3

[Moe Green]

Может быть, таким образом - goo.gl/PwhS40

Answer 4

[Альберт Рашитов]

По функционалу это меню с ховер эффетами (при наведении- смена бг) и текстовым блоком внутри . При клике переход к ссылке.
Как раз 2 пунктом сейчас и занимаюсь.

Answer 5

[Александр]

Тег <map> как раз для подобных ситуаций. Кроссбраузерно, поддержка старыми браузерами.
Неплохой урок по "картам изображений"