clipPath-on-outflowElement-02a.html (918B)
1 <!DOCTYPE html> 2 <html> 3 <style type="text/css"> 4 #outer { 5 width: 100px; 6 height: 100px; 7 overflow: hidden; 8 } 9 10 #clipped { 11 clip-path: inset(10px 10px 10px 10px); 12 opacity: 0.5; 13 width: 200px; 14 height: 200px; 15 } 16 17 #absolutePosition { 18 position: absolute; 19 top: 0; 20 left: 0; 21 width: 400px; 22 height: 400px; 23 background-color: blue; 24 } 25 </style> 26 27 <body style="margin: 0px;"> 28 <div id="outer"> 29 <div id="clipped"> 30 <div id="absolutePosition"> 31 <!-- This should only be clipped by the clip-path, not by the 100x100 32 overflow:hidden clip. --> 33 </div> 34 </div> 35 </div> 36 <svg height="0"> 37 <defs> 38 <clipPath id="myClip"> 39 <rect x="0" y="0" width="100" height="100"/> 40 <rect x="100" y="100" width="100" height="100"/> 41 <rect x="200" y="200" width="100" height="100"/> 42 </clipPath> 43 </defs> 44 </svg> 45 </body> 46 </html>