CODEWITHSUNDEEP
htmlcsssvg
DRB
DRB

Reputation: 653

Creating a Diagonal Mask Effect

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.

mask example

Upvotes: 1

Views: 695

Answers (2)

DRB
DRB

Reputation: 653

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%);
}

Upvotes: 0

Alexandr_TT
Alexandr_TT

Reputation: 14545

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

Upvotes: 1

Related Questions