如何在不重置渐变的情况下为.nav-and-main添加底部曲线效果？

我正在仿制示例网站，想要给.nav-and-main容器添加底部曲线效果，让它自然衔接页面的白色背景，不能重新应用渐变（会导致渐变图案突兀）。

我尝试过以下方案均未实现预期效果：

• 在.nav-and-main底部创建.curve div，设置50px高度与底部圆角，但渐变会覆盖圆角区域；设置白色背景会使整个.curve变为白色块
• 在.curve内添加两个白色方块并调整z-index
• 为.main添加底部内边距并修改其圆角
• 为.curve使用伪元素并调整z-index
• 在.nav-and-main外添加容器并设置白色背景
• 将.curve放入容器并设置容器白色背景

解决方案：利用伪元素实现曲线过渡 #

核心思路是通过伪元素创建白色曲线，定位在容器底部，既遮挡住容器的渐变底部，又能和页面白色背景自然衔接，无需修改原有渐变。

修改后的CSS代码 #

只需要对以下样式进行调整/新增：

.nav-and-main {
  position: relative; /* 为伪元素提供定位基准 */
  overflow: hidden; /* 避免伪元素超出容器范围 */
}

.nav-and-main::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 控制曲线的高度 */
  background-color: white; /* 与页面背景色保持一致 */
  border-top-left-radius: 70px; /* 设置顶部圆角，形成向上凹的曲线 */
  border-top-right-radius: 70px;
}

.main {
  padding-bottom: 60px; /* 增加底部内边距，避免内容被伪元素遮挡 */
}

效果说明 #

• 伪元素的白色曲线刚好覆盖.nav-and-main的底部渐变，形成自然的过渡边界
• 无需额外添加HTML元素，也不会破坏原有渐变的完整性
• 调整border-top-left-radius和border-top-right-radius的值可以改变曲线的弧度，height控制曲线的高度

内容的提问来源于stack exchange，提问作者alexanderherta