圆角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％更改为具有固定值（例如100rem）的值，但是当我这样做时，在非常宽的显示器上，裁剪会在div的顶部可见，除非我将100增大为这个数字太大，以至于我将底部的曲线弄平了。

如何获得与小提琴中相同的效果，但是无论视口有多宽，包括非常宽的显示器（3840像素），都应使曲线的角度保持相同？我不想使用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>