如何使用:before伪元素背景实现倒圆角效果？

问题解决：实现顶部内凹倒圆角背景效果 #

当前代码的核心问题是伪元素的定位、尺寸和圆角参数设置不合理，无法形成预期的内凹倒圆角效果。以下是调整后的代码及说明：

修改后完整代码

CSS

.curved {
  background: #D3041E;
  height: 200px;
  width: 100%;
  position: relative;
}

.curved::before {
  content: '';
  /* 用固定垂直半径控制弧形高度，水平半径设为50%保证左右对称 */
  border-bottom-left-radius: 50% 40px;
  border-bottom-right-radius: 50% 40px;
  position: absolute;
  /* 向上偏移自身高度，让弧形底部与容器顶部精准衔接 */
  top: -40px;
  width: 100%;
  background: #fff;
  /* 数值越大，内凹深度越明显，可按需调整 */
  height: 40px;
}

HTML

<div class="curved">
</div>

调整逻辑说明

1. 定位修正：将伪元素从容器顶部（top:0）移至容器上方（top:-40px），避免覆盖红色背景，让白色弧形成为红色容器与页面背景的过渡部分
2. 尺寸调整：增大伪元素高度（示例中40px），替代原有的3%相对高度，让内凹效果更突出
3. 圆角优化：使用50% 40px的复合圆角值，既保证左右弧形对称，又能通过固定垂直半径精准控制弧度大小

若你需要的是容器底部的倒圆角效果，只需将伪元素定位改为bottom:-40px，并把圆角属性替换为border-top-left-radius:50% 40px和border-top-right-radius:50% 40px即可。

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