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

Question

[Олег Спиридонов]

Здравствуйте, подскажите, как справиться с таким блоком...
Размер полукруга постоянен, ширина нижнего блока - 100% ширины экрана

Answer 1

[Сергей Горячев]

https://jsfiddle.net/yam6o8a5/
Главное, правильно подогнать фоновое изображение.
Суть: состыковать фоновую картинку двух элементов. У псевдоэлемента выравнивание (50% 100%) по центру и нижнему краю, а у самого блока наоборот (50% 0%) по центру и верхнему. И тогда стык получится правильный.
А в целом, всё через псевдоэлемент before.
PS: В таком решении можно будет использовать неоднородный фон.

Answer 2

[Алексей Николаев]

Я бы вырезал белую часть в картинку и наложил бы ее поверх синей с background-size: cover (или любым другим нужным значением). Поскольку у круга тоже должен быть фон, причем продолжающийся в нижнем блоке, это самое кроссбраузерное решение.

Answer 3

[Cyber_bober]

А задать

.line{
height:50px;
width:100%;
background:#000;
}

.circle{
width:80px;
height:80px;
position:absolute;
left:50%;
margin-left:-40px;
bottom:10px;
background:#000;
}

Или тут какая-то специфическая задача? извините, на фиддл времени нет, спать ухожу)

Comments

[Олег Спиридонов]

там не фоновый цвет, там фоновая картинка