CSS-颜色divs交集 [英] CSS - Color divs intersection

问题描述

我想知道纯CSS是否存在一种解决方案，可以为两个div之间的交点着色.

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

例如，如果我有两个div，则具有相同的类:

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:

我希望这两个div的交集被涂成红色，而这仅在CSS中.我想知道是否存在这样的东西:

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

有可能吗?

推荐答案

很遗憾，不是在纯CSS"中

(对不起)

尽管没有一种方法可以自动 进行计算和计算；在CSS中定义 purely 这样的区域，如果您知道两个父级" divs 的尺寸，则可以对其进行硬编码而无需添加其他DOM杂乱，这将只需使用CSS和 div 元素就可以实现:

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:

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

这篇关于CSS-颜色divs交集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！