时间戳

首页 > 解决方案 > 创建对角线蒙版效果

html - 创建对角线蒙版效果

问题描述

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

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

JS小提琴

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

面具看起来像这个图像。

掩码示例

标签： htmlcsssvg

解决方案

可能是这样？

.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

推荐阅读