CSS - Color divs intersection

Question

I was wondering if a solution exists in pure CSS to color the intersection between two divs.

For exemple, if I have two divs, with the same class like this:

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

They are placed on the page so they so they overlap, like this:

I want the intersection of these two divs to be colored in red, and this in CSS only. I was wondering if something like this existed:

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

Is that possible?

Sociometry

did you try giving some alpha to orange, make it translucent – Vito

yeah but that's not really what I want unfortunately :( – Sociometry

Answer 1

Unfortunately, not in 'Pure CSS'

(sorry)

However...

Although there isn't a way to automatically calculate & define define such a area purely in CSS, if you know the dimensions of the two 'parent' divs, you can hard code it without adding additional DOM clutter, which is going to be as close as you can get just using CSS and div elements:

Demo Fiddle

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

Crabb

I think the OP wants something like color combination which is very dynamic, such as if changing the orange to blue, the intersected region should have another color than the fixed red. – Wingless

@KingKing - absolutely, as noted in the answer - although they as requested 'in pure CSS' there isnt a way as far as I'm aware – Crabb

In fact, I just want a way to detect when two divs overlap. Then, I would be able to color it as I want. I'm making a timeline with events (colored divs) and I want to color in red when tow events overlap in my timeline. But it seems like it's not possible in pure CSS. I'm pretty sure that I will achieve this in JS but a pure CSS solution would have been wonderful ^^ Thanks for your help anyway. – Sociometry

@PiTiNiNjA - sadly, this isnt possible without resorting to JS – Crabb

Answer 2

You can try the mix-blend-mode property.

.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>

Tip: always check the compatibility table https://caniuse.com/#feat=css-mixblendmode

Etesian

that's very useful thx i didn't know this property ! – Pandora