移动端左上角指定大小半圆的CSS实现方案求助

1. 调整定位与尺寸 #

要把半圆固定在移动端顶部左上角，同时控制其空间占比，可通过视窗单位定义尺寸，配合固定定位实现需求：

/* 全局样式：设置滚动背景并确保页面可滚动 */
body {
  margin: 0;
  background-color: #007bff; /* 滚动时显示的蓝色背景 */
  min-height: 200vh; /* 赋予足够高度测试滚动效果 */
}

.semi-circle {
  position: fixed; /* 固定在屏幕左上角，不受滚动影响 */
  top: 0;
  left: 0;
  width: 30vw; /* 宽度占视窗30%，可按需调整比例 */
  aspect-ratio: 1/1; /* 保持正方形，确保半圆形状正确 */
  background: #3D4A6D;
  /* 左上角左半圆的圆角设置（直边在右侧） */
  border-radius: 100% 0 0 100%;
  /* 若你需要的是左上角四分之一圆（角落装饰），替换为：
  border-radius: 100% 0 0 0;
  */
  box-shadow: inset -1.5rem 1px 0 #364363, 1.5rem 1px 0 #26324C; /* 缩小阴影值，匹配元素尺寸 */
}

<div class="semi-circle"></div>

2. 关键调整说明 #

• 定位控制：position: fixed搭配top:0; left:0，直接将元素固定在屏幕左上角，滚动时位置保持不变。
• 自适应尺寸：用vw（视窗宽度单位）定义宽度，aspect-ratio:1/1保证宽高相等，半圆大小会随屏幕宽度自动适配，适配移动端不同设备。
• 阴影适配：原代码的阴影值3.5rem过大，按元素尺寸比例缩小为1.5rem（可根据实际大小微调），避免阴影超出元素范围。
• 背景设置：给body添加蓝色背景和足够高度，确保页面滚动时其余区域显示蓝色。

3. 自定义调整建议 #

• 若需要左上角的四分之一圆装饰，将border-radius修改为100% 0 0 0即可。
• 调整半圆占比只需修改width: Xvw的数值，比如40vw代表占视窗宽度的40%。
• 阴影的内阴影、外阴影数值可按元素大小比例微调，保持视觉协调。

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