曲线角不响应的圆形底部div

Question

我使用剪辑路径来创建一个具有圆形底部的div，即：

clip-path: ellipse(80% 60% at 50% 40%);

当视口宽度越来越小时，曲线的角度变得越来越明显。无论视口的宽度如何，我都希望角度保持不变。如果您增加/减小视口宽度：https://jsfiddle.net/jvorumk2/，您可以在这个小提琴中看到问题。

​

* {
  font-size: 1.125rem;
  margin: 0; 
  padding: 0; 
}

#hero {
  background: #007DDC;
  clip-path: ellipse(80% 60% at 50% 40%);
  padding: 3rem 1.25rem 5rem;
}

.wrap {
  max-width: 100%;
  width: 80rem;
}

<div id="hero">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
  </div>
</div>

​

如果你使宽度非常窄，你可以看到曲线变得越来越圆。如果你使视口超宽，曲线就会变得更平坦。

我相信答案是将80%改为一个固定值的值，比如100 100，但是当我这样做时，在非常宽的显示器上的div顶部就可以看到剪裁，除非我将100增加到一个非常大的数字，使底部的曲线变平。

我如何才能达到同样的效果，在小提琴中看到，但保持相同的角度曲线，无论视口有多宽，包括非常宽的显示器(3840 in )？我不喜欢使用SVG剪辑路径，但如果这是唯一的方法，我是开放的。

Answer 1

你可以试试下面的样子。一个半径很大的圆(你想要多大就多大)，为了保持曲线的底部，你要偏移中心：

​

* {
  font-size: 1.125rem;
  margin: 0; 
  padding: 0; 
}

#hero {
  background: #007DDC;
  clip-path: circle(4000px at 50% calc(100% - 4000px));
  padding: 3rem 1.25rem 5rem;
}

.wrap {
  max-width: 100%;
  width: 80rem;
  margin:auto;
}

<div id="hero">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
  </div>
</div>

​

如果你想要以不同的方式控制两个半径，那么你的双唇也是一样的：

​

* {
  font-size: 1.125rem;
  margin: 0; 
  padding: 0; 
}

#hero {
  background: #007DDC;
  clip-path: ellipse(4500px 4000px at 50% calc(100% - 4000px));
  padding: 3rem 1.25rem 5rem;
}

.wrap {
  max-width: 100%;
  width: 80rem;
  margin:auto;
}

<div id="hero">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
  </div>
</div>

​