Как создать несколько геометрических фигур на CSS?

Question

[WTERH]

Хочу создать карту города, разделенную на районы, что бы при наведении на один из районов подсвечивалось его название и сам район.
Районы по сути div блоки имеющие более 10 углов.
Если сошлете в гугл, прошу уточнить поисковый запрос.

Answer 1

[Евгений Петров]

Безусловно, по сути это — SVG. Но вам не нужно мучиться с изучением его синтаксиса для решения описанной задачи.

У некоторых вендоров есть уже готовые полигоны, выделяющие области, как у Yandex.
А для решения общих задач практически у всех есть средства формирования полигонов — Yandex, Google.

Comments

[WTERH]

Тянуть с собой апи одного из гигантов, не хочется, так как весь сайт это одностраничник.

[Евгений Петров]

Костантин Данович: Думаю,что аналогичный сервис есть и в API любых карт.
Если не хочется связываться ни с одним из вендоров карт, то рисуйте в SVG самостоятельно полигоны и там уже при наведении меняйте fill или fill-opacity.

[WTERH]

Евгений Петров: От руки накидал svg.

Answer 2

[Денис Инешин]

С подобными картами отлично справляется d3js.org
Вот пара примеров:
techslides.com/demos/d3/worldmap-template.html
habrahabr.ru/post/181766

Answer 3

[Валентин Дубровский]

canvas or svg имхо.