径向渐变，将一段分割成两个CSS椭圆形

Question

我想把我的部分一分为二，把中间做成这个半椭圆形。但是我做不到。

.super {
  background: linear-gradient(to right, grey 50%, red 50%);
}

<section class="super">
  <div class="nice">
  </div>
</section>

Answer 1

不确定这是否是您想要的结果，但请尝试使用 clip-path 属性。

.super {
  background-color: red;
  height: 150px;
  clip-path: circle(50% at 89% 54%);
}

<section class="super">
   <div class="nice">
   </div>
 </section>

您可以使用以下工具生成自定义剪辑路径：https://bennettfeely.com/clippy/

Answer 2

像这样？

body
{
  background-color:black;
}

#wrapper
{
  width:600px;
  height:175px;
  background-color:#3596fb;
  overflow:hidden;
}

#circle
{
    background-color:white;
    height:600px;
    width:600px;
    border-radius:50%;
    margin-top:-30%;
    margin-left:50%;
}

<div id="wrapper">
  <div id="circle">

  </div>
</div>

https://jsfiddle.net/m1kwvuzd/2/

径向渐变，将一段分割成两个CSS椭圆形

Radial gradiant, split a section in two CSS ellipse shape

css

css-shapes