After spending 48 hours immersed in the world of clip, clip-path, masking, and all things CSS-related, I find myself unable to crack the code on the following challenge:
Imagine a red background filling the body of the page. Layered on top of this is a white div covering the full width and height (with no trace of the red background visible). What I aim to achieve is to cut out a shape from the white div, allowing a glimpse of the red background to show through.
Any wizards out there who can shed some light on how this can be accomplished?
Your insights are greatly appreciated!
Many thanks,
Mario.
Try it out on JSFiddle
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="mask">
</div>
</div>
</body>
</html>
The accompanying CSS:
body{
background:red;
}
.mask{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
background: white;
-webkit-clip-path: polygon(100px 100px, 200px 0px, 500px 500px);
}
Thank you!