Is There A Commonly Supported Way To Make A Skewed "frosted Glass" Effect In Css/svg?

I'm looking to make a website splash page. The page will have one background that will be cut off on the left side with a slanted div, say at a constant 110 degrees from the horizo

Solution 1:

You can consider skew transform without the need of clip-path. here is a basic example where the trick is to specify the correct value of background-position to create the illusion of one image.

.box {
  height:300px;
  background-image:url(https://picsum.photos/600/800?image=1069);
  background-position:left center;
  background-size:cover;
  position:relative;
  overflow:hidden;
}
.skew,
.skew::before{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top left;
  transform:skewY(30deg);
  overflow:hidden;
  background-image:inherit;
  background-position:inherit;
  background-size:00;
}
.skew::before {
  content:"";
  transform:skewY(-30deg);
  filter:blur(10px);
  background-size:cover;
}

/*to illustrate the separation*/.skew {
  border-top:1px solid;
}
/**/.container {
  position:relative;
  z-index:1;
  margin-top:150px;
  padding-left:50px;
}

body {
 margin:0;
}

<divclass="box"><divclass="skew"></div><divclass="container"><h1>some text</h1><p>Lorem ipsum</p></div></div><divclass="box"style="background-image:url(https://picsum.photos/600/800?image=3)"><divclass="skew"></div><divclass="container"><h1>some text</h1><p>Lorem ipsum</p></div></div>

In case you want the skew to be responsive you can add a small JS code to adjust the angle and always cover half the iamge:

var w = window.innerWidth;
var h = 300; /*the height of the box*/document.querySelector('.box .skew').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
document.querySelector('.box .skew span').style.transform="skewY(-"+(Math.atan(h/w)*180/Math.PI )+"deg)";

window.onresize = function(event) {
    w = window.innerWidth;
    document.querySelector('.box .skew').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
    document.querySelector('.box .skew span').style.transform="skewY(-"+(Math.atan(h/w)*180/Math.PI )+"deg)";
};

.box {
  height:300px;
  background-image:url(https://picsum.photos/600/800?image=1069);
  background-position:left center;
  background-size:cover;
  position:relative;
  overflow:hidden;
}
.skew,
.skewspan{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:top left;
  transform:skewY(30deg);
  overflow:hidden;
  background-image:inherit;
  background-position:inherit;
  background-size:00;
}
.skewspan{
  transform:skewY(-30deg);
  filter:blur(10px);
  background-size:cover;
}
/*to illustrate the separation*/.skew {
  border-top:1px solid;
}
/**/.container {
  position:relative;
  z-index:1;
  margin-top:150px;
  padding-left:50px;
}

body {
 margin:0;
}

<divclass="box"><divclass="skew"><span></span></div><divclass="container"><h1>some text</h1><p>Lorem ipsum</p></div></div>

Solution 2:

You can also make it all in a single <svg> image, using a <pattern> element to fill half a triangle with the image, and apply your filter on it.

svg {
  width: 100vw;
  height: 200px;
  position: absolute;
  top: 0;
}

.container {
  position: relative;
  z-index: 1;
  margin-top: 100px;
  padding-left: 50px;
}

<svgwidth="1024"height="200"viewBox="0 0 1024 200"preserveAspectRatio="none"><defs><patternid="pat"viewBox="0 0 1024 200"width="100%"height="100%"><imagexlink:href="https://picsum.photos/1024/200?image=1029"width="1024"height="200"/></pattern><filterid="blur"><feGaussianBlurin="SourceGraphic"stdDeviation="10" /></filter></defs><!-- background no filter --><rectwidth="1024"height="200"fill="url(#pat)"/><!-- foreground triangle, blurred --><pathd="M0,0L1024,200H0Z"fill="url(#pat)"filter="url(#blur)"/></svg><divclass="container"><h1>some text</h1><p>Lorem ipsum</p></div>