圆底 div 曲线角度不响应

Question

我正在使用剪辑路径创建具有圆底的 div，即：

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

随着视口宽度越来越小，曲线的角度也越来越明显。无论视口的宽度如何，我都希望角度保持不变。如果您 increase/decrease 视口宽度：https://jsfiddle.net/jvorumk2/

，您可以看到此 fiddle 中发生的问题

* {
  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 增加到一个非常大的数字，以至于我使底部的曲线变平。

如何实现与 fiddle 相同的效果，但无论视口有多宽，包括非常宽的显示器 (3840px)，都保持曲线的角度不变？我不喜欢使用 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>

圆底 div 曲线角度不响应

Rounded bottom div where curve angle is not responsive

css

clip-path