复杂设计模式：重叠透明形状的HTML/CSS实现求助

我看你已经在尝试用CSS border-radius组合来构建目标形状了，这个思路非常靠谱！你提供的代码已经有了核心框架，我帮你补全未完成的部分，并且整理成可直接运行的完整示例，顺便优化了布局逻辑：

完整可运行代码 #

HTML #

<div class="shape-container">
  <!-- 右侧目标形状 -->
  <div class="halfCircleRight1">
    <div class="halfCoverTop1"></div>
    <div class="halfCoverBottom1"></div>
  </div>
  <!-- 左侧翻转后的对称形状 -->
  <div class="left1 halfCircleRight1">
    <div class="halfCoverTop1"></div>
    <div class="halfCoverBottom1"></div>
  </div>
</div>

CSS #

/* 容器：用来优雅排列多个形状，替代float布局 */
.shape-container {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
}

/* 翻转类：将元素旋转180度得到对称形状 */
.left1 {
  transform: rotate(180deg);
}

/* 基础右半圆：核心形状的底色部分 */
.halfCircleRight1 {
  height: 70px;
  width: 70px;
  border-top-right-radius: 10em;
  border-bottom-right-radius: 10em;
  background: #326d7d;
  position: relative; /* 让内部遮罩可以精准定位 */
}

/* 顶部白色遮罩：遮挡右半圆的左上四分之一区域 */
.halfCoverTop1 {
  height: 35px;
  width: 35px;
  border-bottom-right-radius: 10em;
  background: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}

/* 底部白色遮罩：遮挡右半圆的左下四分之一区域 */
.halfCoverBottom1 {
  height: 35px;
  width: 35px;
  border-top-right-radius: 10em;
  background: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
}

关键优化与说明 #

• 给.halfCircleRight1添加了position: relative，让内部的白色遮罩可以用绝对定位精准对齐，避免了浮动布局的不确定性
• 补全了.halfCoverBottom1的完整样式，和顶部遮罩形成对称，完美遮挡住半圆的左下区域
• 用flex布局的.shape-container替代了float，让多个形状的排列更可控、更易维护
• 保留了你原本的rotate(180deg)逻辑，直接作用在基础半圆上就能得到对称的左向形状
• 使用大数值的border-radius（比如10em）可以确保圆角是完美的弧形，不用手动计算半圆半径

如果你的目标形状和这个示例有细微差异，只需要调整对应的宽高、颜色或者遮罩的定位值就能快速适配~

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