Как сделать полукруглый блок с фоном?

Question

[Ян]

Добрый день!
Возник вопрос. Каким образом можно сделать два таких блока?
take.ms/SfZIM
низ полукругом и подложка картинкой, должен присутствовать parallax

Answer 1

[Сергей Горячев]

https://tympanus.net/Development/SectionSeparators/

Но в данном случае, можно и картинку просто отпилить нужного полукруга, чтобы не париться.
Всё равно картинку делать, так не все равно обрезанная она будет или через CSS делать круг.
Оранжевый блок поместить чуть ниже через z-index и сместить наверх margin-top: -50px;

https://jsfiddle.net/webirus/a9Lqr596/
Простой вариант, с обрезанной картинкой.
Но лучше сделать именно через псевдоэлемент нижнюю полукруглую часть, потому как вес верзней картинки получается значительный.
А если будет только нижняя часть отрезана, то весь будет ниже.

Comments

[Ян]

картинку отпиливать нельзя, parallax хотят

[Сергей Горячев]

Yancheg: Не вижу проблемы.

[Ян]

Sergey Goryachev: т.е. отпилить вот такой полукруг?
take.ms/XNnM1

[Ян]

Sergey Goryachev: + отпиленные с полукругом картинки весят по 600-700кб при сжатии

[Сергей Горячев]

Yancheg: Да можно так, а можно и всю картинку целиком использовать, внизу с вырезанным полукругом. Картинки все равно будут и никуда не деться, и будет она квадратная или полукруглая - не суть. Просто бери 2 картинки как есть.

[Сергей Горячев]

Yancheg: Как пример. https://jsfiddle.net/webirus/a9Lqr596/
Но в данном случае, когда картинка цельная, она в PNG и весит много, если отпилить только низ, вес будет значительно уменьшен.

[Сергей Горячев]

Yancheg: Если бы был однородный фон в одном из блоков, можно было бы легко решить средствами CSS или SVG, но тут особенного смысла нет выделываться %)

[Ян]

но если я отпилю полукруглый низ только, то тогда не выйдет с паралаксом ничего... или я чего то недопонимаю?
извиняюсь, если глупые вопросы задаю)

[Сергей Горячев]

Ян: Не вижу никакой проблемы с паралаксом. Фактически, можно сделать чтобы большая картинка и отрезанная были как единое целое. Какой там должен быть эффект вообще? Что должюно параллакситься?

[Сергей Горячев]

Ян: Если не получится отпилить верхнюю, пили нижнюю по тому же принципу) В любом случае, параллаксу это никак не должно помешать. Конечно, я не совсем уловил пока еще суть эффекта. Но что тут особенного не вижу)

[Ян]

Sergey Goryachev: эффект, получается, листаем вниз, задний фон слегка ползёт вверх, а как это сделать с порезанной картинкой плохо представляю

[Сергей Горячев]

Ян: Тогда всё рисовать на SVG, но не уверен, что фоновый параллакс там работает.

[Ян]

понятно, значит надо резать либо кусок полукруга, либо полукруглый кусок следующего блока, верно?

[Сергей Горячев]

Ян: Да, это самый простой способ. Можно сделать у отрезанного куса аккуратный переход на основную картинку, чтобы не было заметно при скролле, но это геморройно )))

[Ян]

думал есть более элегантный выход, спасибо )