Немного не понимаю как сверстать этот блок...
границы по стрелкам...
резать тупо по сетке и вставлять в бек кусками? или экспорт в пнг с прозрачностью и наложением?
Объясните, зачем резать по тем направляющим?
Что дальше с этой картинкой? Поверх нее контент? Вниз повторяется это нечто серое? Что на мобилках?
Нормально макет покажите.
И меня немного смущает дизайн 10летней давности.
Ankhena,
это граница экрана. предполагалось full HD со скролом. то что на фото full-width бекграунды. 3 БГ друг за другом и контентом поверх них. на мобилках без БГ, только текст и меню.
не понятно в чем вопрос?. какие то линии на рисунке и стрелки.
Если бы автор рассказал что линии это резделяющие различных блоков на сайте.
Как видно что автор задавть вопрос не может и поэтому ответ получить не может.
Если высота верхних блоков фиксированная. то думаю что надо просто картинку бэкграундом сделать для всего сайта. Позиционировать вверху и по центру ширины. Убрать повторения (no-repeat). Картинку сжать на этом сайте https://squoosh.app/ , по крайней мере сжать лучше ее чем по этой ссылке в другом месте не удастся.
ее можно сконвертировать в WEBP, нужно проверять. по ссылке этой можно это сделать.
. тут на моем сайте ни чего не резано. картинка лежит строго по центру.
Сергей Кореневский, а помойму все предельно ясно. картинки не стандартной формы а верстка упирается в блоки т.е. в квадраты.
тут варианта два:
1. или делать png+z-index+margin но при этом будет высокий вес у картинки или низкое качество
2. делать через clip-path+jpg тут вопрос с адаптивностью
