HTML – 如何使圆圈只出现在具有不同颜色的某些div中？

基本上我会尽量保持这个简单.

我试图做这样的事情(忽略任何设计方面,除了我说的)：

我已经在JSfiddle 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>

基本上问题是我看不出圆圈通过两个矩形连接并且有两种不同的颜色,就像在图像中一样.在仍然切出圆圈的其余部分时,会从矩形中溢出.

我希望这是有道理的.

提前致谢.

解决方法

我不得不改变你的标记.为了让旧标记起作用,它本来就太黑了.基本上我为每个标题指定了一个圆圈,并将溢出设置为隐藏在标题上.然后我玩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>