Как сверстать горы на картинке?

Question

[Игорь Пушкарский]

Добрый день!

Толи голова неправильно работает, толи я не то делаю.

В общем есть макет вот как бы вы сверстали горы, что бы на всех разрешениях надпись не уезжала со своего места на горах и шар всегда находился на своем месте, минимальное разрешении 600px.

Видимо я не правильно вопрос поставил, сверстать горы можно даже тупо картинками, дело в том что при уменьшении размера экрана картинка должна центровался а надпись всегда оставаться на 1 месте. Чет в голову не приходит как это сделать.

Answer 1

[Андрей Чернышев]

svg будет по лучше, а если по старинке, можно поиграться с border, пост в помощь.

Answer 2

[A K]

Такое делается в svg

Answer 3

[ndsdmfwg]

canvas, не?

Comments

[Игорь Пушкарский]

полностью все отрисовывать? Раньше не сталкивался, видимо настало время =) кто подскажет где почитать или лучше посмотреть видеоуроки?

Answer 4

[Златослав Десятников]

В предыдущем ответе предложили использовать canvas, несколько человек советовало SVG. Я соглашусь с людьми, предложившими SVG:

Преимущества:

• Векторное изображение (можно сколь угодно увеличивать);
• Надёжнее, чем верстать с помощью CSS (может вести себя по-разному в разных браузерах);
• SVG легко "раскрашивается" в CSS.

Но если стоит задача сверстать это только с помощью HTML5+CSS3, то используйте трансформации. Один треугольник - отдельный блок, тени у всех одинаковые (вроде бы).
В принципе и на CSS не так сложно реализовать, как казалось сначала. Но я бы использовал SVG.