両方のdivに属する領域を表示

Question

私は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をズームイン/ズームアウトできます。 div2に属する領域を表示し、div2の他の部分を非表示にすることです。

黄色の領域が表示され、青い領域は表示されません。 どうすればいいですか？ありがとう！

Answer 1

CSS Clippingを使用し、矩形を使用してdiv2の重複部分のみを表示することができます。