Creating a Diagonal Mask Effect - html

Question

I'm wondering how I would go about creating a diagonal mask like effect. The mask would show all in the top left corner, hide the middle part, then show all in the bottom right corner. In the example, the mask would be on the .container element and mask out any children in the div as well.
I've looked at resources online, specifically here, and can't get this effect to work on non-image elements. Is there a different type of property to use in CSS to achieve this effect? I was thinking maybe SVG, but I'd like it to adapt to the width and height of the element, and wasn't sure how to pull that off.
JS Fiddle
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
mask: gradient(linear, left top, right bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.35, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.65, rgba(0,0,0,1)),
color-stop(1.00, rgba(0,0,0,1)));
}
.shape {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: red;
}
<div class="container">
<div class="shape"></div>
</div>
The mask would look something like this image.

Answer 1

Maybe so?
.container {
width:50%;
height:50%;
}
.rect1 {
fill: url('#grad1');
}
<div class="container">
<svg class="the-svg" viewBox="0 0 200 200" >
<defs>
<linearGradient id="grad1" x1="0" x2="1.0" y1="0" y2="1.0" >
<stop offset="0%" stop-color= "white"/>
<stop offset="35%" stop-color="white"/>
<stop offset="50%" stop-color="black"/>
<stop offset="65%" stop-color="white"/>
<stop offset="100%" stop-color="white"/>
</linearGradient>
</defs>
<rect class="rect1" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
The solution is adaptive and works in all browsers, including Edge

Answer 2

Using mask-image works here. Updated JSFiddle.
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(-45deg, black 0%, transparent 35% , transparent 50%, transparent 65%, black 100%);
mask-image: linear-gradient(-45deg, black 0%, transparent 35% , transparent 50%, transparent 65%, black 100%);
}