how to create div with a smooth curved border - css

Question

i'm trying to recreate this element
I've created the following structure:
.slider-container { max-width: 300px; margin: 100px auto; background: red; position: relative; box-sizing: content-box; }
.slider-background { background: white;
position: absolute;
top: 10px;
right: 10px;
width: 90%;
height: 90%;
text-align: right;
z-index: 1; }
.slider-background a {
padding: 15px 20px;
display: block;
}
.slider-info {
padding: 45px 30px;
}
.slider-content { position: absolute; top: 0; left: 0; z-index: 2; background: lightblue; }
<div class="slider-container">
<div class="slider-background">
more<br>info
</div>
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100"/>
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>
</div>
</div>
But i'm not sure on how to recreate the curved angle on the top div, what would be the best solution to achieve that result?

Answer 1

Here is an idea with pseudo element and skew transformation.
I kept only the relevant for so we can see the trick:
.slider-info {
padding: 45px 30px;
}
.slider-content {
background:
linear-gradient(lightblue,lightblue) bottom/100% calc(100% - 200px) no-repeat;
width: 300px;
margin: 20px auto;
border-radius:20px 0 20px 20px;
position:relative;
z-index:0;
overflow:hidden;
}
.slider-content::after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
height:200px;
background:lightblue;
transform-origin:bottom;
transform:skew(30deg);
border-radius:0 20px 0 0;
}
<div class="slider-content">
<div class="slider-info">
<img src="https://via.placeholder.com/140x100" />
<h2>
lorem<br><b>ipsum</b>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at dolor tristique, ultricies nisl a, egestas metus. Nam ut enim in ante volutpat convallis. Donec efficitur nisl non nisi ornare tincidunt. Mauris at justo tellus.
</p>
</div>