mask-clip-8-ref.html (1048B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 div.outer { 7 /* 8 * content box: 40 x 20 9 * padding box: 52 x 38 10 * border box: 60 x 50 11 * margin box: 66 x 54 12 */ 13 background-color: purple; 14 position: absolute; 15 top: 10px; 16 margin: 1px 2px 3px 4px; 17 border: solid transparent; 18 border-width: 8px 2px 4px 6px; 19 padding: 6px 9px 12px 3px; 20 width: 40px; 21 height: 20px; 22 mask-size: 100% 100%; 23 mask-image: url(support/transparent-100x50-blue-100x50.svg); 24 } 25 26 div.first { 27 left: 10px; 28 mask-origin: border-box; 29 } 30 31 div.second { 32 left: 110px; 33 mask-origin: border-box; 34 } 35 36 div.third { 37 left: 210px; 38 mask-origin: content-box; 39 } 40 41 </style> 42 </head> 43 <body> 44 <div class="outer mask first"></div> 45 <div class="outer mask second"></div> 46 <div class="outer mask third"></div> 47 </body> 48 </html>