圆角底部 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>