paint-on-maskLayer-1c.html (564B)
1 <!DOCTYPE html> 2 <html> 3 <title>Paint clip-path onto mask layer</title> 4 <style type="text/css"> 5 #inner { 6 width: 200px; 7 height: 200px; 8 box-sizing: border-box; 9 background: blue; 10 /* make clip-path pained on mask layer */ 11 border: 1px solid transparent; 12 will-change: transform; 13 } 14 15 #outer { 16 width: 200px; 17 height: 200px; 18 clip-path: inset(0px 100px 100px 0px); 19 /* make it fixed so that inner div has different AGR with outter div */ 20 position: fixed; 21 } 22 </style> 23 <div id="outer"> 24 <div id="inner"></div> 25 </div> 26 27 </html>