Вот конечный эффект.
Я пробовал, но не знаю, как быть дальше.
Я надеюсь получить некоторые подсказки, которые помогут мне продолжить.
Теперь я добавил некоторый код, чтобы он выглядел более похожим на него. Но все равно выглядит немного несовершенно.
Можете ли вы увидеть результат ниже.
Я потратил много дивов на их объединение, но скругленные углы выглядят не очень гладко
.block {
position: relative;
}
.block-shapes {
position: relative;
display: flex;
}
.block-shape {
position: absolute;
height: 30px;
width: 50%;
top: 0;
}
.block-shape__left {
left: 0;
border-radius: 40px 40px 0 0 / 30px 30px 0 0;
background-color: #eee;
}
.block-shape__right {
right: 0;
margin-top: 30px;
border-radius: 0 0 40px 40px / 0 0 30px 30px;
background-color: #fff;
}
.block-fills {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.block-fill {
position: absolute;
top: 0;
box-sizing: border-box;
}
.block-fill__left {
left: 0;
width: 50%;
height: 90px;
background-color: #eee;
border-radius: 40px 40px 0 0 / 30px 30px 0 0;
}
.block-fill__right {
right: 0;
margin-top: 30px;
width: 50%;
height: 60px;
background: linear-gradient(to right, #eee, #fff);
border-radius: 0 40px 0 0 / 0 30px 0 0;
}
.block-content {
position: relative;
z-index: 3;
height: 300px;
background-color: #eee;
margin-top: 60px;
border-radius: 0 30px 30px 30px;
}<div class="block">
<div class="block-fills">
<div class="block-fill block-fill__left"></div>
<div class="block-fill block-fill__right"></div>
</div>
<div class="block-shapes">
<div class="block-shape block-shape__left"></div>
<div class="block-shape block-shape__right"></div>
</div>
<div class="block-content"></div>
</div>
