使用css创建曲线形状？

Question

我真的需要你的帮助......

有没有人知道如何使用css制作这样的形状？

我试图成功，但现在我卡住了..

here's my code pen

这是css样式和HTML

.a {
  width: 20%;
  height: 500px;
  background-color: red;
  display: inline-block;
  margin: 0;
}
.b {
  display: inline-block;
  position: absolute;
  width: 20%;
  height: 500px;
  background-color: black;
  margin: 0;
  border-radius: 50% 0 0 50%;
  left: 20%;
}

<div id="container">
  <div class="a">
    ...
  </div>
  <div class="b">
    ...
  </div>
</div>

Answer 1

CSS Radial Gradient

实现这一目标的一种方法是使用径向渐变背景。这也将使您的背景在您需要的区域透明，因此它应符合您的要求。

body {
  background: lightblue;
}
div {
  background: radial-gradient(circle at 250% 25%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, red 50%, red 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-size: 100% 200%;
  height: 400px;
  width: 200px;
}

<div>Text</div>

• Radial Gradients | MDN
• Gradient Generator

Answer 2

实现此目的的另一种方法是使用css-Shadow和pseudo-elements

＆＃13;

＆＃13;

div {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    height: 400px;
    width: 200px;
}

div:before{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    box-shadow: 0 0 0 200px red;
    height: 100%;
    width: 100%;
    border-radius:50%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;