How can i add shape background like on image using css? [duplicate] - html

Question

This question already has an answer here:
How to create uneven rounded sides on a div?
(1 answer)
Closed 3 years ago.
I tried like this but it's not right solution. Any solutions for this issue please.
.shape {
width: 200px;
height: 100px;
position:absolute;
top: 0;
right: 0;
background: red;
-moz-border-radius: 0px 0px 20px 110px;
-webkit-border-radius: 0px 0px 20px 110px;
border-radius: 0px 0px 20px 110px;
}
<div class="shape"></div>

Answer 1

I have added a :pseudo element and postioned it
.bg-shape {
position: relative;
overflow: hidden;
padding: 50px;
}
.bg-shape:after {
content: '';
position: absolute;
width: 600px;
height: 600px;
background: red;
border-radius: 50%;
top: 0;
right: 0;
z-index: -1;
top: -60%; /* change value as required */
right: -20%; /* change value as required */
}
<div class="bg-shape">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
</div>