background-rounded-image-clip-001.html (895B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Background Clip Follows Rounded Corner</title> 4 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-22547"> 5 <link rel="match" href="reference/background-rounded-image-clip.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> 7 <style> 8 html { 9 background-color: green; 10 } 11 #a { 12 top: 20px; 13 left: 20px; 14 position: absolute; 15 width: 20px; 16 height: 20px; 17 background-color: black; 18 } 19 20 #b { 21 position: absolute; 22 width: 300px; 23 height: 200px; 24 background-image: linear-gradient(green, green); 25 background-clip: content-box; 26 border-top-left-radius: 90px; 27 border-width: 10px; 28 border-style: solid; 29 border-color: transparent; 30 } 31 </style> 32 <div id="a"></div> 33 <div id="b"></div>