CSS - Color divs intersection

css, html, intersection, overlap

Solution

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

Problem

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?

Original source