Как сверстать углубление как на картинке?

Question

[Alisa1]

Имеется вот такая картинка: https://monosnap.com/file/sNavLT44id5IIBhfjQw7xBIG... как сверстать данное углубление?

Answer 1

[Максим]

это версия , но надо доработать : https://codepen.io/MaximLensky/pen/JMbEWg?editors=1100

Answer 2

[Dima Polos]

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

Comments

[Илья]

Только блоку с этим небольшим квадратом придется ставить цвет фона, а значит и закрасится тот вырез )

[Alisa1]

А без фотошопа никак? Просто на разных разрешениях экрана разная ширина самого блока.

[Dima Polos]

Илья, ну да, согласен, тогда просто вырезать квадрат не с прозрачностью, а с самой картинкой.
Второй вариант, это@Alisa1, я думаю svg в качестве маски. Надо поискать, что-то такое я слышал. Но если брать вариант с картинкой, как писал выше, то можно подумать над позиционированием или задать жестко высоту. Если там не динамический контент будет, то по идее можно высоту рассчитать.

[Alisa1]

спасибо)) попробую поискать

[Dima Polos]

Еще есть вот такой вариант...

[Dima Polos]

Dima Polos, вариант выше такой страшный, и все таки с картинкой из фотошопа, вырезанной, но собрать его таким образом: поделить экран на три столбца, слева и справа задать фон блокам, а посредине блок разделить на еще два, сверху - картинка, снизу - простой блок с фоном. Возникает проблема с контентом, НО! у нас на макете всегда есть паддинг у блоков, чтоб контент одного блока не мешал второму, и вот родителю для этих пазлов задать высоту жестко, на величину паддинга, а уже под родителем - контейнер просто с белым фоном для контента.

[Илья]

Можно вставить по центру (снизу этого фона с водой) блок с процентной шириной и паддингом снизу (или сверху), равным отношению значению высоты в пикселях к значению ширины в пикселях, в него вставить фоном svg файл (или png), width: 100%; height: 100%; background-size: cover (или contain), вырез - прозрачный, снизу белый фон, дальше псевдоэлементами before, after вставить белый фон слева и справа от изначального блока. И у вас получится адаптивный вырез.

Answer 3

[iKest]

Статья, как делать различные разделители:
https://tympanus.net/codrops/2013/10/03/a-collecti...