创建对角蒙版效果

Question

我想知道如何创建类似效果的对角蒙版。遮罩将在左上角显示所有内容，隐藏中间部分，然后在右下角显示所有内容。在此示例中，遮罩将位于.container元素上，并且也遮罩div中的所有子级。

我已经在线查看资源specifically here，但无法在非图像元素上使用这种效果。 CSS中可以使用其他类型的属性来实现此效果吗？我在想也许是SVG，但我希望它能适应元素的宽度和高度，并且不确定如何实现。

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>

面具看起来像这张图片。

Answer 1

也许是吗？

.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>

该解决方案具有自适应性，可在包括Edge在内的所有浏览器中使用

Answer 2

在这里使用蒙版图像即可。 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%);
}