javascript - 显示属于两个div的区域

我有3个div，请检查我的代码。

<div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

#div1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: red;
}

#div2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
  zoom: 150%;
}

jsfiddle
如您所见，div2与div1重叠。
我可以放大和缩小div2。
我要做的是显示属于两个div的区域，并隐藏div2 的其他部分

显示黄色区域，隐藏蓝色区域。
我怎样才能做到这一点？谢谢！

最佳答案

您可以使用CSS Clipping并使用矩形仅显示div2的重叠部分。

关于javascript - 显示属于两个div的区域，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43729917/