svg-clip-path-fixed-values-ref.html (742B)
1 <!doctype html> 2 <style> 3 svg { 4 width: 300px; 5 height: 300px; 6 } 7 .container { 8 width: 300px; 9 height: 300px; 10 position: relative; 11 } 12 .bg1 { 13 background: green; 14 position: absolute; 15 width: 100px; 16 height: 100px; 17 } 18 .noclip { 19 top: 100px; 20 left: 100px; 21 } 22 .cp1 { 23 clip-path: polygon(0px 0px, 100px 0px, 0px 100px); 24 top: 0; 25 left: 0; 26 } 27 .cp2 { 28 clip-path: circle(50px); 29 top: 200px; 30 left: 0; 31 } 32 .cp3 { 33 clip-path: ellipse(50px 30px); 34 top: 200px; 35 left: 200px; 36 } 37 .cp4 { 38 clip-path: inset(10px 20px 30px 40px); 39 top: 0; 40 left: 200px; 41 } 42 </style> 43 <div class=container> 44 <div class="bg1 noclip"></div> 45 <div class="bg1 cp1"></div> 46 <div class="bg1 cp2"></div> 47 <div class="bg1 cp3"></div> 48 <div class="bg1 cp4"></div> 49 </div>