How to make a circle only appear in certain divs with different colours?

Question

Basically I will try to keep this simple.

I am trying to do something like this (ignore any design aspects except what I state):

I have started this on 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>

Basically the problem is I cannot make it appear that the circle connects through the two rectangles and have two different colours, like in the image. While still cutting out the rest of the circle, that spills out of the rectangle.

I hope this makes sense.

Thanks in advance.

Answer 1

I had to change your mark up. In order to get the old mark up to work, it would have been too hacky. Basically I assigned a circle for each header, and I set overflow to hidden on the header. Then I play with the top property to decide which part of the circle I want to display. There is slight blue showing up on the border to the left, but I'm sure it won't take long to figure out why.

.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>

Answer 2

You can actually do this with even less HTML markeup and use a ::before or ::after psuedo-element to create the circle: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

This creates a child element for a circle in each header and setting overflow:hidden on the header conceals the parts of the circle you don't want to be visible.

.header-wrapper {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #0091cc;
  border-radius: 20px;
  height: 100px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  width: 90%;
}

.header::after {
  border-radius: 50%;
  content: "";
  height: 400px;
  left: -100px;
  position: absolute;
  width: 400px;
}

.header:nth-child(1)::after {
  background-color: pink;
  top: -100px;
}

.header:nth-child(2)::after {
  background-color: orange;
  bottom: -100px;
}

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

https://jsfiddle.net/od62shsp/4/