Верстка страницы с фонами неправильной формы?

вопрос еще немного не по теме, но все же, как называются эти картинки в кружочках ? как их правильно верстать? вырезать картинкой с макета ? или сделать как-то через цсс ?

В смысле дерево, график и прочее? Можно сделать SVG, и это будет анимируемо, настраиваемо и зело приятно для ретины.

Можно тот же SVG заради осла святого кодировать в base64 и положить фоном. Анимировать теперь саму картинку можно будет только целиком, цвет не поменять, но на ретине, как и в первом варианте будет отлично.

Можно найти другое векторное решение — шрифт волшебный, где будут символы такие. Но поди его ещё найди... Но для ретины тоже хороший вариант — вектор он и в Африке торт.

Ну и картинкой можно. Простенько, быстренько, для ретины нужно колдовство с background-size.

си последний вопрос по графике=)) тайм лайн вертикальный как правильно реализовать ?

Евгений Петров: с бордерами у псевдоэлементов не получается адаптивности, ведь бордер то в пикселях задаю. с фоном тоже не очень вариант, ибо если захотят расширить контент то оно вылезет за картинку. с градиентомчесно говоря не понял, остается вариант с трансформациями.

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

Справедливости ради - эта штуку можно сделать тупо через border

т.е самый оптимальный вариант это просто нарезать эти трапеции в фш и блокам задать этот фон и все ? а как быть с адативностью ?

vladHD: если Вы мазахист и любите боль, то можно попробовать svg и ещё потом анимацию сделать как этот город течёт типа сосулек )) Но Я думаю это явно не в бюджет

что вы имеете в виду , когда писали на основе :before after ?