Как правильно верстать такой сайт?

Question

[Карен Мнацаканян]

Привет всем!
Не могу понять как правильно верстать такие сайты. Если можно подробно опишите пожалуйста,буду благодарен за любую ссылку.

Answer 1

[Сергей Горячев]

Вообще, в 2017-м году, такое принято делать на SVG, конечно.
Но есть еще одно решение, которое имеет право на жизнь пока еще.
Составить карту изображения через Map Area и подсвечивать.
ru.crazysquirrel.ru/tools/generators/map-area

Answer 2

[iBird Rose]

1) через svg - там собственно так и сделано.
2) если не силен в svg - накладываешь на картинку через absolute блоки, которые крутишь через transform rotate, и иногда используешься transform skew. и просто при ховере их подсвечиваешь.

Comments

[Сергей Горячев]

Я бы посмотрел на всё это извращение через absolute)))

[iBird Rose]

Sergey Goryachev: ну хз. по примеру там всего было бы 2 блока максимум. на каждом этаже. и after и before их.

Answer 3

[Николай]

Можно и просто css transform, :affter и ::bofore обойтись и не нужен svg. Можно в один svg все элементы убрать, но вставлять придется inline прямо в старницу и clip-path дублировать в css.

Comments

[Сергей Горячев]

Извращенец)))

[Карен Мнацаканян]

Если честно ничего не понял из "Можно в один svg все элементы убрать, но вставлять придется inline прямо в старницу и clip-path дублировать в css."

Answer 4

[Василий П]

Попробуй найти ответы в книге - Новая большая книга css(Дэвид Макфарланд)

Answer 5

[Виталий]

Я уж думал, там и мобильный вариант интересный .. а нет :/