Как сверстать такой блок?

Question

[greencost]

Как лучше сверстать вот такой вот блок(сама картинка из сети, но у меня такой же смысл):



Как это сверстать?

Comments

[Ankhena]

Я бы делала так:
По низу clip-path
По верху - абсолютом, для меню белый фон с псевдо нужной формы (svg или градиентами или тот же clip-path).
Или даже лучше не абсолютом, а в потоке.

[poniyur]

Ankhena, а как в clip-path сделать фигуру с закругленными углами? фигачить через полигон много точек?

[poniyur]

Ankhena, а всё, в маске можно фигуры объединять (plygon + ellipse), вопрос снят

Answer 1

[WapSter]

Каждый день задается подобный вопрос. Clip-path тебе в помощь

Comments

[greencost]

Нет нет, я не про скривления - я про то, куда вобще пихать эту картинку? В хедер с position:absolute, а меню давать белый фон? А как тогда оставить прозрачный цвет для блока с телефоном?

[Duh]

Сделай картинку фоном. Меню, оставить заявку, форму и текста сверстай

Answer 2

[RAX7]

Либо упороться в тригонометрию и сделать через css transform + немного js

либо использовать svg маски

Answer 3

[Евгений]

Привет!

Я бы сделал div с background картинкой для заднего фона и поверх него добавлял бы меню, телефон и форму заявки. Этот div ты сделаешь absolute и назначишь ему z-index: отрицательное значение, чтобы блок был всегда сзади других элементов. Благодаря этому ты сможешь установить и белый фон и прозрачный. Блок с картинкой механизмов можно спозиционировать с помощью absolute.