我如何使用 css 添加像图像上那样的形状背景？

Question

我这样试过，但这不是正确的解决方案。请解决此问题。

.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

我添加了一个 :pseudo 元素并将其放置

.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>

我如何使用 css 添加像图像上那样的形状背景？

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

html

css

css-shapes