Каким образом лучше реализовать такую карту

Question

[akrom123]

Нужно вставить такую карту на сайт. Каким образом будет лучше ее реализовать

Comments

[Виталий Желтяков]

Вам нужна только карта или нужно указать маршруты?

Answer 1

[Петруша Укропов]

jsfiddle.net/artishok/d9BhJ
В красный блок грузим карту

Comments

[akrom123]

Збс. Я думал нужно polyfill ами нужно будет делать. Совсем забыл про цсс3

[Никита Гущин]

В Chrome просто красный вертикальный прямоугольник.

[Иван]

@iNikNik плюсую, надо вот так jsfiddle.net/d9BhJ/1

[Никита Гущин]

@0neS уже лучше, но не совсем ... посмотрите что будет, если поместить в ваш блок изображение: оно просто повернется на 25deg - jsfiddle.net/d9BhJ/2

[Никита Гущин]

@0neS точней, не в ваш блок, а в блок, который придумал @artishok

[Иван]

@iNikNik а зачем помещать туда изображение? Карта yandex или google.

[Никита Гущин]

@0neS это как пример. Карта yandex или google - это тоже некоторое количество изображений + js. Я к тому, что все содержимое внутри блока будет повернуто. И если вы поставите туда карту - она тоже будет повернута.

[Евгений Низамиев]

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

[Никита Гущин]

@RadiationX ага, я так и предложил) см. мой пост ниже

[Евгений Низамиев]

@iNikNik ах да, извиняюсь, не удосужился прочитать)

Answer 2

[Никита Гущин]

У меня такое решение: берем прямоугольный блок и сдвигаем его - получается параллелограмм. Но проблема в том, что все содержимое будет тоже сдвинуто (например: обычный текст станет наклонным). Поэтому, внутри мы делаем еще контейнер, который сдвигаем в обратном направлении, и помещаем туда карту (в примере - просто картинка):
jsfiddle.net/Rc6MV/2

PS плохо, только то, что в классе .map появляется магия в виде margin-left: -45px - чтобы сдвинуть блок к началу параллелограмма (нижний левый угол)