| <!DOCTYPE html> |
| <style> |
| #mask { |
| width: 200px; |
| height: 200px; |
| background-color: red; |
| -webkit-mask-image: linear-gradient(black, black), linear-gradient(90deg, black, black); |
| -webkit-mask-size: 50% 100%, 100% 50%; |
| -webkit-mask-repeat: no-repeat; |
| } |
| #cover { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| position: absolute; |
| left: 0; |
| top: 0; |
| } |
| div { |
| display: inline-block; |
| } |
| </style> |
| <p>There should be 2 green squares and a green rectangle below and no red.</p> |
| <div style="position: absolute"> |
| <div> |
| <div id="mask" style="-webkit-mask-composite: source-in;"></div> |
| <div id="cover"></div> |
| </div> |
| <div> |
| <div id="mask" style="-webkit-mask-composite: source-out;"></div> |
| <div id="cover" style="left: 204px;top:100px;"></div> |
| </div> |
| <div> |
| <div id="mask" style="-webkit-mask-composite: source-out; -webkit-mask-size: 50px; -webkit-mask-position: bottom right, top left;"></div> |
| <div id="cover" style="left: 558px; top:0px; height: 200px; width: 50px;"></div> |
| </div> |
| </div> |
