html - 如何更改维恩图中的交点颜色？

Question

我正在尝试更改维恩图中交叉点的颜色。

这是一支笔，展示了我到目前为止所做的事情: 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;

    }

}

我希望交集颜色的输出是白色。

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