How can I color the specific overlapping region of two divs in Css?

Question

I am facing a problem to create the below figure. I think I am missing something that can help me modify and color the specific region where two or more divs are intersecting.

You can checkout the figure. How can I achieve this? four petal flower

* {
  margin: 0;
  background: #4F77FF;
}

.m {
  width: 240px;
  height: 240px;
  top: 30px;
  right: 50%;
  border-radius: 200px;
  background: #FFFFFF;
  position: absolute;
}

.t {
  left: 80px;
  top: -90px;
  z-index: 3;
  background: yellow;
}

.l {
  z-index: 4;
  background: green;
}

.r {
  left: 50%;
  z-index: 2;
  background: blue;
}

.b {
  left: 80px;
  top: 150px;
  z-index: 1;
  background: orange
}

<div class="m l"></div>
<div class="m t"></div>
<div class="m r"></div>
<div class="m b"></div>

Answer 1

If fast:

div {   
  width: 160px;
  height: 160px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: lightskyblue;
}

div i {
  border-radius: 100% 0;
}

div i:nth-child(1),
div i:nth-child(4) {
  border-radius: 0 100%;
}

div i:nth-child(1) {
  background-color: yellow;
}
div i:nth-child(2) {
  background-color: green;
}
div i:nth-child(3) {
  background-color: blue;
}
div i:nth-child(4) {
  background-color: orange;
}

<div>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>