径向渐变，将一个部分分成两个 CSS 椭圆形状

问题描述

我试图将我的部分一分为二，并将中间部分变成这个半椭圆形状。但我做不到。

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

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

解决方法

不确定这是否是您想要的结果，但请尝试使用 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/

,

喜欢吗？

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/