Html 如何更改维恩图中的相交颜色？

我试图改变维恩图中交叉点的颜色

这是一支笔，展示了我迄今为止所做的工作：

我希望交叉点颜色的输出为白色。

Venn图，只使用css和html
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;
}

**Html代码**
**css代码**
div{
宽度：240px；
高度：240px；
位置：绝对位置；
边界半径：50%；
}
.innerw{
左：0px；
顶部：0px；
溢出：隐藏；
}
.W2{
左：170px；
顶部：0px；
溢出：隐藏；
}
.内部{
左：-85px；
顶部：130像素；
背景颜色：淡绿色；
z指数：20；
}
.内部：悬停{
背景颜色：绿色；
}
#中段1{
左：0px；
顶部：0px；
溢出：隐藏；
}
#中1{
左：170px；
顶部：0px；
}
#中段2{
左：0px；
顶部：0px；
溢出：隐藏；
}
#mid2{
左：85像素；
顶部：130像素；
}
#中段{
左：170px；
顶部：0px；
溢出：隐藏；
}
.中{
背景色：白色；
z指数：15；
}
#外层1{
左：0px；
顶部：0px；
背景：橙色
}
#外层2{
左：170px；
顶部：0px；
背景：红色
}
#外层3{
左：85像素；
顶部：130像素；
}
.外部{
背景颜色：橙色；
z指数：10；
}

我试图在不使用任何JS库的情况下实现这一点。只有HTML和CSS。完美！谢谢你，苏普里亚！如何使用最小混合模式将相交颜色设置为白色@保利·达斯我说，你可能不能“我怀疑你是否能否定交叉路口的任何颜色，但混合模式可能是一种选择。”-codepen.io/Paulie-D/pen/oeyyn？editors=1100好的，让我试试。

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;
}