Как реализовать такую вещь?

Question

[Дмитрий Смирнов]

Друзья, подскажите, пожалуйста, как реализовать такой полукруг?
joxi.ru/xAeDnP5Fp5RM62

Есть две секции (верхняя и нижняя), у них разные фоны. Нужно сделать такой полукруг в первой секции, чтобы в нем был фон от второй секции.

Мне пока удалось только фон второй секции задвинуть за фон первый, а круг этот вырезать никак не получается.

Answer 1

[ukoHka]

Если зафиксировать высоту блоков, то можно так:
https://jsfiddle.net/4nz26es8/

Answer 2

[Дмитрий]

https://jsfiddle.net/soledar10/cyagysc9/

Answer 3

[Ярослав Иванов]

https://jsfiddle.net/space2pacman/rnsughc1/6/

Answer 4

[Vitaliy Orlov]

div.btn {
  position: relative;
  top: -50px; 
  left: calc( 50% - 50px );
  width: 100px; 
  height: 100px;
  border-radius: 50px; 
  background-color:red;
}

вот так понятно как элементы располагаются
https://jsfiddle.net/0sfugdzm/

а так будет единый фон:
https://jsfiddle.net/0sfugdzm/1/

Comments

[Дмитрий Смирнов]

Такое решение не подходит, когда ставишь фоном для круга ту же картинку, что и нижнему блоку, то видно, что фоны различаются, вот joxi.ru/xAeDnP5Fp5RPw2

[Дмитрий Смирнов]

а нужно, чтобы фон был един, ну и по крайней мере так выглядело

[Ankhena]

patrickj: Подгоните фон, чтобы было не видно стыка

[Дмитрий Смирнов]

Ankhena W: Да, так и сделаю)