clip-path-shape-011.html (790B)
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 <link rel="match" href="reference/clip-path-shape-arc-ref.html"> 7 <meta name="assert" content="When providing one radius value with percentage, the percentage should be relative to the diagonal."> 8 <meta name="fuzzy" content="maxDifference=0-67;totalPixels=0-128"> 9 </head> 10 <style> 11 #shape { 12 width: 400px; 13 height: 300px; 14 background: green; 15 clip-path: shape( 16 from 0px 100px, 17 arc to 20px 100px of 10% large cw, 18 arc to 100px 20px of 5% small, 19 arc to 0 100px of calc(10px + 15%) 20 rotate 30deg); 21 } 22 </style> 23 24 <body> 25 <div id="shape"></div> 26 </body> 27 </html>