mask-clip-8.html (1358B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Masking: mask-clip: clip mask image</title> 6 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip"> 7 <link rel="match" href="mask-clip-8-ref.html"> 8 <meta name="assert" content="Check fall back values for fill-box (:content-box), stroke-box and view-box (:border-box)."> 9 <style type="text/css"> 10 div.outer { 11 /* 12 * content box: 40 x 20 13 * padding box: 52 x 38 14 * border box: 60 x 50 15 * margin box: 66 x 54 16 */ 17 background-color: purple; 18 position: absolute; 19 top: 10px; 20 margin: 1px 2px 3px 4px; 21 border: solid transparent; 22 border-width: 8px 2px 4px 6px; 23 padding: 6px 9px 12px 3px; 24 width: 40px; 25 height: 20px; 26 mask-size: 100% 100%; 27 mask-image: url(support/transparent-100x50-blue-100x50.svg); 28 } 29 30 div.first { 31 left: 10px; 32 mask-origin: stroke-box; 33 } 34 35 div.second { 36 left: 110px; 37 mask-origin: view-box; 38 } 39 40 div.third { 41 left: 210px; 42 mask-origin: fill-box; 43 } 44 45 </style> 46 </head> 47 <body> 48 <div class="outer mask first"></div> 49 <div class="outer mask second"></div> 50 <div class="outer mask third"></div> 51 </body> 52 </html>