创建对角线蒙版效果答案

【问题标题】：Creating a Diagonal Mask Effect创建对角线蒙版效果
【发布时间】：2018-12-01 07:06:49
【问题描述】：

我想知道如何创建类似对角蒙版的效果。蒙版将全部显示在左上角，隐藏中间部分，然后全部显示在右下角。在该示例中，掩码将位于 .container 元素上，并同时屏蔽 div 中的所有子元素。

我查看了在线资源，specifically here，但无法使这种效果适用于非图像元素。在 CSS 中是否可以使用不同类型的属性来实现此效果？我在想可能是 SVG，但我希望它能够适应元素的宽度和高度，但不知道如何实现。

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

面具看起来像这张图片。

【问题讨论】：

你是什么意思 - “让它与 HTML 元素一起工作”？直接在div上创建某种不透明度的文学，例如？
看来我发消息了，我已经澄清了这个问题。我正在寻找屏蔽 .container 元素的部分内容。我的意思是我无法在非图像元素上使用这种效果。
你应该用 -webkit-mask 替换掩码，因为你正在使用 -webkit .. 然后使用没有 webkit 的版本
不是说要包含-webkit-，非webkit版本会不会只是简单的掩码？

标签： html css svg

【解决方案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

【讨论】：

形状看起来不错，但是如何将它作为遮罩应用到容器元素，并让它遮住子元素的一部分？
@DRB 可以制作面具。请画出它应该看起来的样子

【解决方案2】：

在这里使用 mask-image 有效。 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%);
}

【讨论】：