Html CSS-颜色divs相交

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

例如，如果我有两个div，同一个类如下：

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

这可能吗？

不幸的是，不是在“纯CSS”中 （对不起）

然而。。。 虽然没有一种方法可以完全在CSS中自动计算和定义这样一个区域，但如果您知道两个“父级”div的尺寸，您可以在不添加额外DOM杂波的情况下对其进行硬编码，这将是仅使用CSS和

div

元素所能得到的最接近的：

HTML

---

您可以尝试

混合模式

属性

.orange\u square，
蓝濸广场{
位置：绝对位置；
高度：100px；
宽度：100px；
}
橙色广场{
背景：橙色；
}
蓝濸广场{
背景：蓝色；
顶部：75px；
左：55px；
/*诀窍*/
混合模式：颜色燃烧；
}

我认为OP想要一种非常动态的颜色组合，例如，如果将橙色改为蓝色，则相交区域应该有另一种颜色，而不是固定的

红色

@KingKing-绝对如此，正如答案中所述-尽管它们是“纯CSS”要求的，但据我所知，没有办法，我只是想知道两个div重叠的时间。然后，我就能随心所欲地给它上色了。我正在用事件（彩色div）制作一个时间线，当两个事件在我的时间线中重叠时，我想用红色表示。但在纯CSS中似乎是不可能的。我很确定我会在JS中实现这一点，但是一个纯CSS解决方案会很好^^无论如何谢谢你的帮助。@PiTiNiNjA-遗憾的是，如果不借助JS，这是不可能的。你是否尝试过给orange一些alpha，使其半透明是的，但这不是我真正想要的不幸的：（那很有用thx我不知道这个属性！

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

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

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