CSS - 颜色divs交集

Question

我想知道纯CSS中是否存在一个解决方案来为两个div之间的交集着色.

例如,如果我有两个div,使用相同的类:

<div class="orange_square"></div>
<div class="blue_square"></div>

它们被放置在页面上,因此它们重叠,如下所示:

我希望这两个div的交集用红色着色,这只在CSS中.我想知道这样的事情是否存在:

.orange_square {
   background-color:orange;
}
.blue_square {
   background-color:blue;
}
.orange_square [overlap_operator?] .blue_square {
   background-color:red;
}

那可能吗？

Answer 1

不幸的是,不是'纯CSS'

(抱歉)

然而...

虽然没有办法自动计算和定义纯粹在CSS中定义这样的区域,但是如果你知道两个"父"的尺寸divs,你可以硬编码它而不会增加额外的DOM混乱,这将会非常接近因为你可以使用CSS和div元素:

演示小提琴

HTML

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

CSS

div {
    position:absolute;
    height:100px;
    width:100px;
}
div:first-of-type {
    background:orange;
}
div:last-of-type:before {
    content:'';
    height:33px;
    width:33px;
    display:block;
    position:absolute;
    background:red;
}
div:last-of-type {
    background:lightblue;
    top:75px;
    left:75px;
}

Answer 2

您可以尝试一下该mix-blend-mode物业。

.orange_square,
.blue_square {
    position:absolute;
    height:100px;
    width:100px;
}

.orange_square {
    background: orange;
}

.blue_square {
    background: blue;
    top:75px;
    left:55px;
    
    /* the trick */
    mix-blend-mode: color-burn;
}

<div class="orange_square"></div>
<div class="blue_square"></div>

提示：请务必检查兼容性表https://caniuse.com/#feat=css-mixblendmode