Как правильно задать границу блоку?

Question

[kot98]

есть два блока. у первого блока фон - картинка. у второго просто белый цвет, который заходит на первый блок. как сделать, чтобы второй блок заходил на первый - понятно (через -margin). но как задать такую "узорчатую" часть верхней границе второго блока?

Comments

[Александр Васильев]

Картинкой.

[kot98]

Александр Васильев, можно, пожалуйста, поподробнее

[Александр Васильев]

kot98, как будет видно попытки в codepen, направленные на самостоятельное решение задачи - тогда подробнее.

[Александр Шемаханов]

kot98, вариантов как это сделать несколько. Нужно определиться с желаемым результатом. Будет этот выступ статичным или адаптивным, есть ли в выступе контент, есть ли в блоке 1 на этом же уровне контент или контент блока 1 заканчивается по верхнему краю выступа?
Эти моменты будут влиять на реализацию.

[kot98]

Александр Шемаханов, будет только на десктопе, на планшете - не будет. в выступе и блоках в его уровнях контента не будет

[Ankhena]

kot98,
- svg (картинкой, фоном, clip-path)
- радиальными градиентами (возможно + псевдо, по вашему скрину не ясно чем оправдан этот выступ)

Вот из аналогичного вопроса https://codepen.io/AnnaSummer/pen/gOQVxBR

Answer 1

[Александр Шемаханов]

Один из вариантов, сделать с помощью псевдоэлементов и svg. Сделано по картинке, на глаз :)