显示属于两个div的区域

Question

我有三个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的其他部分

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

Answer 1

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