如何裁剪或隐藏CSS伪元素圆形的溢出内容？

我需要给一个section实现底部圆形边框，当前尺寸符合需求，但右侧出现了溢出——原因是.top-level::after设置了width: 230%，而这个宽度是为了达到所需的圆形半径才设置的。

我的CSS代码如下：

.top-level {
  position: relative;
  min-width: 1440px;
  min-height: 730px;
  background-color: var(--off-white); /* set to transparent */
  z-index: 1;
  padding-bottom: 10%;
}

.top-level::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%; /* horizontally centers the element */
  margin-left: -115%; /* negative half of the width */
  width: 230%;
  height: 1000px;
  background: var(--purple);
  border-radius: 100%;
  z-index: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transform: translateY(-15%);
}

我已经试过两种方法，但都没解决：

• 给整个section套容器并添加overflow: hidden，结果hero图被裁剪，而且右侧还是有溢出；
• 全局设置overflow: hidden。

可行修复方案 #

方案1：动态控制伪元素宽度，精准限制溢出层级

1. 移除.top-level的固定min-width: 1440px，改用width: 100%实现自适应，避免强制宽度导致的横向溢出；
2. 用clamp()函数动态设置伪元素宽度，兼顾大屏幕的百分比需求和小屏幕的固定最大宽度，同时同步调整水平偏移值；
3. 给.top-level的直接父容器添加overflow: hidden，确保hero图在.top-level内部且z-index高于伪元素，避免裁剪内容。

修改后核心代码：

.top-level {
  position: relative;
  width: 100%; /* 替换固定min-width */
  min-height: 730px;
  background-color: var(--off-white);
  z-index: 1;
  padding-bottom: 10%;
}

.top-level::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: clamp(2000px, 230%, 3000px); /* 动态宽度 */
  height: 1000px;
  margin-left: calc(-clamp(2000px, 230%, 3000px) / 2); /* 同步偏移 */
  background: var(--purple);
  border-radius: 100%;
  z-index: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transform: translateY(-15%);
}

/* 给.top-level的父容器添加 */
.top-level-parent {
  overflow: hidden;
  width: 100%;
  position: relative;
}

方案2：改用视窗单位实现圆形底部（无需大宽度伪元素）

如果不需要极端大的圆形半径，这个方法更简洁且无溢出隐患：

1. 给.top-level设置左右底部圆角为50vw（基于视窗宽度的一半，保证圆形弧度自适应）；
2. 移除伪元素，直接用容器本身的背景色和内边距控制圆形凸起高度。

示例代码：

.top-level {
  position: relative;
  width: 100%;
  min-height: 730px;
  background-color: var(--purple);
  z-index: 1;
  padding-bottom: 20%; /* 调整此值控制圆形凸起高度 */
  border-bottom-left-radius: 50vw;
  border-bottom-right-radius: 50vw;
}

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