How to change intersection color in venn diagram?

Question

I am trying to change the color of intersection in Venn Diagram.

Here's a pen demonstrating what I've done so far: https://codepen.io/amolmt/pen/VJxNxM

.circle {
    position: absolute;
    width: 55%;
    height: 55%;
    border-radius: 50%;

    p.circle__header {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 100%;
        max-width: 170px;
        text-align: center;
        font-size: 22px;
        color: white;

    }

}

I expect the output of intersection color to be white.

Answer 1

Venn diagram by using only css and html
**Html code**

<div id="outer1" class="outer">
</div>
<div id="outer2" class="outer">
</div>
<div id="midw1">
<div id="mid1" class="mid"></div>
</div>
<div id="midw2">


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


**css code**

div {
  width: 240px;
  height: 240px;
  position: absolute;
  border-radius: 50%;
}

.innerw {
  left: 0px;
  top: 0px;
  overflow: hidden;
}

.innerw2 {
  left: 170px;
  top: 0px;
  overflow: hidden;
}

.inner {
  left: -85px;
  top: 130px;
  background-color: palegreen;
  z-index: 20;
}

.inner:hover {
  background-color: green;
}

#midw1 {
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#mid1 {
  left: 170px;
  top: 0px;
}
#midw2 {
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#mid2 {
  left: 85px;
  top: 130px;
}
#midw3 {
  left: 170px;
  top: 0px;
  overflow: hidden;
}

.mid {
  background-color: white;
  z-index: 15;
}


#outer1 {
  left: 0px;
  top: 0px;
  background:orange
}

#outer2 {
  left: 170px;
  top: 0px;
  background:red
}
#outer3 {
  left: 85px;
  top: 130px;
}
.outer {
  background-color: orange;
  z-index: 10;
}