径向渐变，分割成两个 CSS 椭圆形状

【问题标题】：Radial gradiant, split a section in two CSS ellipse shape径向渐变，分割成两个 CSS 椭圆形状
【发布时间】：2021-08-17 10:57:08
【问题描述】：

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

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

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

【问题讨论】：

标签： css css-shapes

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：