How can i add shape background like on image using css?

Question

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>