clip-path-shape-arc-ref.html (550B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Masking: Test clip-path property and shape function with single-value arc radius</title> 5 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape"> 6 </head> 7 <style> 8 #shape { 9 /* 500/sqrt(2) ~= 353 */ 10 width: 353px; 11 height: 353px; 12 background: green; 13 clip-path: shape( 14 from 0px 100px, 15 arc to 20px 100px of 10% large cw, 16 arc to 100px 20px of 5% small, 17 arc to 0 100px of calc(10px + 15%) 18 rotate 30deg); 19 } 20 </style> 21 22 <body> 23 <div id="shape"></div> 24 </body> 25 </html>