Уже несколько дней не могу справиться с данной задачей. Мне нужно сделать такой закругленный блок. Пробовал задавать border-radius: 50%
и менять разную высоту блока, но все равно как-то коряво получается. Подскажите, как такое вообще делается?
-
Нет никакого экрана. Есть только окно. Границы окна. – vp_arth 18 апр '17 в 8:23
-
2Что есть здесь закругление? – Swift - Friday Pie 18 апр '17 в 8:34
добавить комментарий
|
1 ответ
Как насчет такого варианта?
.container {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
height: 200px;
margin: 0 auto;
max-width: 500px;
}
.section {
padding: 0 20px;
}
.section_light {
background: #FBF3E6;
border-radius: 0 0 50% 50% / 0 0 40px 40px;
margin-bottom: -40px;
overflow: hidden;
position: relative;
}
.section_light .container {
background: #fff;
}
.section_dark {
background: #E5D0B3;
}
.section_dark .container {
background: #EBD2AA;
}
<div class="section section_light">
<div class="container"></div>
</div>
<div class="section section_dark">
<div class="container"></div>
</div>