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