Создание эффекта диагональной маски

Question

Мне интересно, как бы я мог создать эффект диагональной маски.Маска будет отображать все в верхнем левом углу, скрывать среднюю часть, а затем отображать все в нижнем правом углу.В этом примере маска будет на элементе .container и будет также маскировать всех дочерних элементов в div.

Я смотрел онлайн ресурсы, специально здесь , и могу 'Этот эффект не работает для элементов без изображения.Есть ли другой тип свойства для использования в 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

Использование mask-image работает здесь. Обновлен 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%);
}

Answer 2

Может и так?

.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