CSS实现网页半月形背景的正确方法

不需要换整套实现方案，你一开始想的用border-radius实现的思路完全可行，现在效果相反是几个定位和属性写反了，调整对应CSS即可。

问题点梳理 #

• 父容器section没有设置相对定位，绝对定位的伪元素会相对于根节点定位，容易出现偏移
• 伪元素设置了margin-left: auto，会把整个背景块推到容器最右侧，和你需要的左侧半月位置完全相反
• 圆角使用固定像素值，在不同尺寸屏幕下弧度容易变形
• 渐变角度和参考图的色彩过渡方向不匹配

修复代码 #

首先给section补充基础定位属性，再修改伪元素样式：

/* 补充section的定位属性 */
section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* 替换原有的section:before样式 */
section:before {
  content:'';
  position:absolute;
  top: 0;
  left: 0;
  height:100%;
  width:65%;
  background: linear-gradient(135deg, #1565FF, #9FC0ff);
  border-top-right-radius: 100vmax;
  border-bottom-right-radius: 100vmax;
  z-index:-1;
}

属性说明 #

• left: 0把半月背景固定在容器左侧，去掉原来的margin-left: auto就不会跑到右边
• 圆角值用100vmax替代固定像素，不管屏幕高度多少，右侧边缘都能保持平滑的半圆形弧度，不会出现扁、尖的变形问题
• 渐变角度调整为135deg，和参考图的蓝色过渡方向匹配
• min-height: 100vh给section设置和视口一致的高度，能让半月背景铺满首屏，和参考图效果一致
• overflow: hidden避免背景块溢出容器出现多余滚动条

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