clip-path-contentBox-1d.html (871B)
1 <!DOCTYPE html> 2 <title>CSS Masking: clip path with content-box</title> 3 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> 4 <link rel="match" href="reference/green-100x100.html"> 5 <meta name="assert" content="Check that the 'clip-path' property supports content-box."> 6 7 <style> 8 body { margin: 0; } 9 .clipped { 10 display: inline-block; 11 clip-path: content-box; 12 /* This background draws in the padding and should be clipped. */ 13 background-color: red; 14 padding: 4px; 15 /* This border draws outside the content box and should be clipped. */ 16 border: 4px solid darkred; 17 /* This outline draws outside the content box and should be clipped. */ 18 outline: 100px solid maroon; 19 } 20 .content { 21 width: 100px; 22 height: 100px; 23 background: green; 24 } 25 </style> 26 <div class="clipped"> 27 <div class="content"></div> 28 </div>