html - 如何让一个圆圈只出现在某些不同颜色的div中？

Question

基本上我会尽量保持简单。

我正在尝试做这样的事情(忽略除我声明之外的任何设计方面):

我已经在 J​​SFiddle 上开始了这个 here.

.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.header {
  background-color: #0091cc;
  border-radius: 20px;
  height: 100px;
  width: 90%;
  margin-bottom: 20px;
}
.circle {
  background-color: pink;
  height: 400px;
  width: 400px;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
}

<div class="header-wrapper">
  <div class="header"></div>
  <div class="header"></div>
</div>

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

基本上，问题是我无法使圆看起来像通过两个矩形连接并且具有两种不同的颜色，如图中所示。虽然仍然切掉了圆的其余部分，但它溢出了矩形。

我希望这是有道理的。

提前致谢。

Answer 1

我不得不更改您的标记。为了让旧标记正常工作，它太老套了。基本上我为每个标题分配了一个圆圈，并将溢出设置为隐藏在标题上。然后我使用 top 属性来决定我想要显示圆的哪一部分。左边的边框出现了轻微的蓝色，但我相信很快就会弄清楚原因。

.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.header {
  background-color: #0091cc;
  border-radius: 20px;
  height: 100px;
  width: 90%;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.circle {
  position: absolute;
  top: -100px;
  left: -100px;
  height: 200px;
  width: 200px;
  border-radius: 200px;
  background-color: #fff;
}

.circle.top {
  top: 0;
}

.yellow {
  background-color: yellow;  
}

.pink {
  background-color: pink;  
}

<div class="header-wrapper">
  <div class="header">
    <div class="circle top pink"></div>
  </div>
  <div class="header">
    <div class="circle yellow"></div>
  </div>
</div>