如何用CSS实现左侧半屏半圆并适配不同屏幕尺寸？

当然可以用CSS实现适配不同屏幕尺寸的半圆效果，下面结合你的Vue+Vuetify场景，提供几种实用方案：

方案1：border-radius基础实现（最简便） #

利用border-radius属性配合宽高比例，用相对单位确保适配所有屏幕：

<template>
  <!-- 顶部向下凸的半圆 -->
  <div class="semi-circle-top"></div>
  <!-- 底部向上凸的半圆 -->
  <div class="semi-circle-bottom"></div>
</template>

<style scoped>
.semi-circle-top {
  width: 100vw; /* 占满屏幕宽度 */
  height: 50vw; /* 高度为宽度一半，保证半圆比例 */
  border-radius: 0 0 50% 50%; /* 仅底部两个圆角设为50% */
  background-color: #2196f3; /* 替换为你的目标颜色 */
  margin: 0 auto;
}

.semi-circle-bottom {
  width: 100vw;
  height: 50vw;
  border-radius: 50% 50% 0 0; /* 仅顶部两个圆角设为50% */
  background-color: #2196f3;
  margin: 0 auto;
}
</style>

方案2：clip-path裁剪实现（更灵活） #

如果需要配合Vuetify的容器布局，用clip-path可以实现更自定义的半圆形状：

<template>
  <v-container fluid class="semi-circle-wrapper">
    <div class="semi-circle"></div>
  </v-container>
</template>

<style scoped>
.semi-circle-wrapper {
  padding: 0;
  overflow: hidden; /* 防止裁剪内容溢出容器 */
}

.semi-circle {
  width: 100%;
  height: 200px; /* 可改用vh单位适配不同屏幕高度，比如15vh */
  background-color: #2196f3;
  /* 顶部半圆：椭圆水平半径50%，垂直半径100%，圆心在顶部中间 */
  clip-path: ellipse(50% 100% at 50% 0%);
  /* 底部半圆替换为：clip-path: ellipse(50% 100% at 50% 100%); */
}
</style>

方案3：SVG嵌入实现（适配性极佳） #

SVG天生支持无损缩放，适合作为背景或独立元素复用：

<template>
  <!-- 顶部半圆SVG -->
  <svg class="semi-circle-svg" viewBox="0 0 100 50" preserveAspectRatio="none">
    <path d="M0,50 Q50,0 100,50 L100,50 L0,50 Z" fill="#2196f3" />
  </svg>
</template>

<style scoped>
.semi-circle-svg {
  width: 100%;
  height: auto;
  display: block;
}
</style>

viewBox定义SVG坐标系，preserveAspectRatio="none"让它自动拉伸适配容器宽度，二次贝塞尔曲线Q50,0控制半圆弧度。

Vuetify布局适配注意事项 #

• 若半圆需要和v-app-bar/v-footer配合，可通过position: absolute或调整margin避免布局重叠；
• 用vw/vh单位时，可通过媒体查询微调移动端显示：

@media (max-width: 600px) {
  .semi-circle-top {
    height: 40vw; /* 移动端缩小半圆高度比例 */
  }
}

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