overflow-clip-margin-010-ref.html (762B)
1 <!doctype html> 2 <html class="reftest"> 3 <meta charset="utf-8"> 4 <title>Overflow-clip-margin corner shape (ref)</title> 5 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 6 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 7 <style> 8 .container { 9 width: 100px; 10 height: 100px; 11 12 position: relative; 13 top: 30px; 14 left: 30px; 15 16 border: 5px solid green; 17 18 border-radius: 0px 15px 25px 35px; 19 } 20 .clipper { 21 width: 140px; 22 height: 140px; 23 24 margin: -20px; 25 border-radius:0px 27.52px 40px 50px; 26 overflow: clip; 27 } 28 .child { 29 width: 400px; 30 height: 400px; 31 background: lightblue; 32 opacity: 0.8; 33 } 34 </style> 35 36 <div class=container> 37 <div class=clipper> 38 <div class=child></div> 39 </div> 40 </div>