| <style> | |
| .box-with-hole { | |
| height: 200px; | |
| width: 200px; | |
| background-color: green; | |
| -webkit-mask: url('data:image/svg+xml;utf8, \ | |
| <svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> \ | |
| <rect width="100%" height="100%" fill="white"/> \ | |
| <rect x="25%" y="25%" width="50%" height="50%" fill="black"/> \ | |
| </svg>') luminance no-repeat; | |
| } | |
| </style> | |
| <body> | |
| <div class="box-with-hole"></div> | |
| </body> |