html - 使用 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 径向渐变

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

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