使用 css 创建曲线形状？

Question

我真的需要你的帮助..

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

我试着做到了，但现在我卡住了..

这是 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>

Answer 2

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

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%;
}

<div></div>

使用 css 创建曲线形状？

Create a curve shape using css?

html

css

css-shapes

CSS 径向渐变