Mixing
Is there a commonly supported way to make a skewed “frosted glass” effect in CSS/SVG?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
7
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 horizontal (or equivalent, keep reading). This div will blur the background behind it and will allow for content to be put on it, like text. See the YouTube Brand Resources page: instead of having a plain white background on the left, I would like that to blur the background picture that sits underneath it.
I've not yet found a way to put all of the information I've found together in a way that works and is supported by most browsers. For example, I recently tried a skewed div that shared a background with the parent container, like this post asked about, but CSS clip paths aren't commonly supported yet, and a white div won't cut it for my use case (to be clear, this solution ends with a skewed background image).
Using SVG clip paths and filters (see below) gets me close, but as you can see, I don't know how to make sure the image and the SVG fills the screen and lines up with the background behind it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<div class="splash">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<filter id="blur" x="0" y="0">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
</filter>
<clipPath id="clip">
<polygon points="0,0 100,100 0,100"></polygon>
</clipPath>
<image clip-path="url('#clip')" filter="url('#blur')" x="0" y="0" width="100" height="100" xlink:href="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"></image>
</svg>
</div>
</body>
</html>
Sass:
html, body
position: relative
margin: 0
overflow-x: hidden
height: 100%
.splash
position: absolute
width: 100%
height: 100%
overflow: hidden
background-image: url("https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg")
background-size: cover
background-repeat: no-repeat
background-color: lightgrey
background-attachment: fixed
svg
position: absolute
width: inherit
height: inherit
Any ideas?
html css svg sass
asked Jan 3 at 8:02
PhericPheric
3816
add a comment |
7
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 horizontal (or equivalent, keep reading). This div will blur the background behind it and will allow for content to be put on it, like text. See the YouTube Brand Resources page: instead of having a plain white background on the left, I would like that to blur the background picture that sits underneath it.
I've not yet found a way to put all of the information I've found together in a way that works and is supported by most browsers. For example, I recently tried a skewed div that shared a background with the parent container, like this post asked about, but CSS clip paths aren't commonly supported yet, and a white div won't cut it for my use case (to be clear, this solution ends with a skewed background image).
Using SVG clip paths and filters (see below) gets me close, but as you can see, I don't know how to make sure the image and the SVG fills the screen and lines up with the background behind it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<div class="splash">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<filter id="blur" x="0" y="0">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
</filter>
<clipPath id="clip">
<polygon points="0,0 100,100 0,100"></polygon>
</clipPath>
<image clip-path="url('#clip')" filter="url('#blur')" x="0" y="0" width="100" height="100" xlink:href="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"></image>
</svg>
</div>
</body>
</html>
Sass:
html, body
position: relative
margin: 0
overflow-x: hidden
height: 100%
.splash
position: absolute
width: 100%
height: 100%
overflow: hidden
background-image: url("https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg")
background-size: cover
background-repeat: no-repeat
background-color: lightgrey
background-attachment: fixed
svg
position: absolute
width: inherit
height: inherit
Any ideas?
html css svg sass
asked Jan 3 at 8:02
PhericPheric
3816
I'm not sure how to make this less broad. Would you rather have me close this question and ask multiple variants of the form "How can one make a full screen splash page divided in half by an angled div at 110 degrees from the horizontal with {SVG,CSS,HTML,clip-path,background images}?" and have some be wrong because I don't know how to? Asking in one question seems like the better option to me.
– Pheric
Jan 3 at 17:25
1
I don't think this question is too broad, though I would like to see this with compiled CSS instead of Sass, unless of course your question is specifically how to do it in Sass.
– TylerH
Jan 3 at 21:45
add a comment |
7
7
7
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 horizontal (or equivalent, keep reading). This div will blur the background behind it and will allow for content to be put on it, like text. See the YouTube Brand Resources page: instead of having a plain white background on the left, I would like that to blur the background picture that sits underneath it.
I've not yet found a way to put all of the information I've found together in a way that works and is supported by most browsers. For example, I recently tried a skewed div that shared a background with the parent container, like this post asked about, but CSS clip paths aren't commonly supported yet, and a white div won't cut it for my use case (to be clear, this solution ends with a skewed background image).
Using SVG clip paths and filters (see below) gets me close, but as you can see, I don't know how to make sure the image and the SVG fills the screen and lines up with the background behind it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<div class="splash">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<filter id="blur" x="0" y="0">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
</filter>
<clipPath id="clip">
<polygon points="0,0 100,100 0,100"></polygon>
</clipPath>
<image clip-path="url('#clip')" filter="url('#blur')" x="0" y="0" width="100" height="100" xlink:href="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"></image>
</svg>
</div>
</body>
</html>
Sass:
html, body
position: relative
margin: 0
overflow-x: hidden
height: 100%
.splash
position: absolute
width: 100%
height: 100%
overflow: hidden
background-image: url("https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg")
background-size: cover
background-repeat: no-repeat
background-color: lightgrey
background-attachment: fixed
svg
position: absolute
width: inherit
height: inherit
Any ideas?
html css svg sass
asked Jan 3 at 8:02
PhericPheric
3816
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 horizontal (or equivalent, keep reading). This div will blur the background behind it and will allow for content to be put on it, like text. See the YouTube Brand Resources page: instead of having a plain white background on the left, I would like that to blur the background picture that sits underneath it.
I've not yet found a way to put all of the information I've found together in a way that works and is supported by most browsers. For example, I recently tried a skewed div that shared a background with the parent container, like this post asked about, but CSS clip paths aren't commonly supported yet, and a white div won't cut it for my use case (to be clear, this solution ends with a skewed background image).
Using SVG clip paths and filters (see below) gets me close, but as you can see, I don't know how to make sure the image and the SVG fills the screen and lines up with the background behind it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<div class="splash">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<filter id="blur" x="0" y="0">
<feGaussianBlur stdDeviation="1"></feGaussianBlur>
</filter>
<clipPath id="clip">
<polygon points="0,0 100,100 0,100"></polygon>
</clipPath>
<image clip-path="url('#clip')" filter="url('#blur')" x="0" y="0" width="100" height="100" xlink:href="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"></image>
</svg>
</div>
</body>
</html>
Sass:
html, body
position: relative
margin: 0
overflow-x: hidden
height: 100%
.splash
position: absolute
width: 100%
height: 100%
overflow: hidden
background-image: url("https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg")
background-size: cover
background-repeat: no-repeat
background-color: lightgrey
background-attachment: fixed
svg
position: absolute
width: inherit
height: inherit
Any ideas?
html css svg sass
html css svg sass
asked Jan 3 at 8:02
PhericPheric
3816
asked Jan 3 at 8:02
PhericPheric
3816
edited Jan 3 at 8:18
Pheric
asked Jan 3 at 8:02
PhericPheric
3816
asked Jan 3 at 8:02
PhericPheric
3816
asked Jan 3 at 8:02
PhericPheric
3816
3816
I'm not sure how to make this less broad. Would you rather have me close this question and ask multiple variants of the form "How can one make a full screen splash page divided in half by an angled div at 110 degrees from the horizontal with {SVG,CSS,HTML,clip-path,background images}?" and have some be wrong because I don't know how to? Asking in one question seems like the better option to me.
– Pheric
Jan 3 at 17:25
1
I don't think this question is too broad, though I would like to see this with compiled CSS instead of Sass, unless of course your question is specifically how to do it in Sass.
– TylerH
Jan 3 at 21:45
add a comment |
I'm not sure how to make this less broad. Would you rather have me close this question and ask multiple variants of the form "How can one make a full screen splash page divided in half by an angled div at 110 degrees from the horizontal with {SVG,CSS,HTML,clip-path,background images}?" and have some be wrong because I don't know how to? Asking in one question seems like the better option to me.
– Pheric
Jan 3 at 17:25
1
I don't think this question is too broad, though I would like to see this with compiled CSS instead of Sass, unless of course your question is specifically how to do it in Sass.
– TylerH
Jan 3 at 21:45
I'm not sure how to make this less broad. Would you rather have me close this question and ask multiple variants of the form "How can one make a full screen splash page divided in half by an angled div at 110 degrees from the horizontal with {SVG,CSS,HTML,clip-path,background images}?" and have some be wrong because I don't know how to? Asking in one question seems like the better option to me.
– Pheric
Jan 3 at 17:25
I'm not sure how to make this less broad. Would you rather have me close this question and ask multiple variants of the form "How can one make a full screen splash page divided in half by an angled div at 110 degrees from the horizontal with {SVG,CSS,HTML,clip-path,background images}?" and have some be wrong because I don't know how to? Asking in one question seems like the better option to me.
– Pheric
Jan 3 at 17:25
1
1
I don't think this question is too broad, though I would like to see this with compiled CSS instead of Sass, unless of course your question is specifically how to do it in Sass.
– TylerH
Jan 3 at 21:45
I don't think this question is too broad, though I would like to see this with compiled CSS instead of Sass, unless of course your question is specifically how to do it in Sass.
– TylerH
Jan 3 at 21:45
add a comment |
2 Answers
2
active
oldest
votes
6
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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
add a comment |
3
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;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018409%2fis-there-a-commonly-supported-way-to-make-a-skewed-frosted-glass-effect-in-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
6
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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
add a comment |
6
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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
add a comment |
6
6
6
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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>.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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>.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:0 0;
}
.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;
}<div class="box">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>
<div class="box" style="background-image:url(https://picsum.photos/600/800?image=3)">
<div class="skew"></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>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,
.skew span{
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:0 0;
}
.skew span{
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;
}<div class="box">
<div class="skew"><span></span></div>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>
</div>answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
edited Jan 3 at 9:00
answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
answered Jan 3 at 8:54
Temani AfifTemani Afif
82.3k104795
82.3k104795
add a comment |
add a comment |
3
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;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
add a comment |
3
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;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
add a comment |
3
3
3
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;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
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;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>svg {
width: 100vw;
height: 200px;
position: absolute;
top: 0;
}
.container {
position: relative;
z-index: 1;
margin-top: 100px;
padding-left: 50px;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>svg {
width: 100vw;
height: 200px;
position: absolute;
top: 0;
}
.container {
position: relative;
z-index: 1;
margin-top: 100px;
padding-left: 50px;
}<svg width="1024" height="200" viewBox="0 0 1024 200" preserveAspectRatio="none">
<defs>
<pattern id="pat" viewBox="0 0 1024 200" width="100%" height="100%">
<image xlink:href="https://picsum.photos/1024/200?image=1029" width="1024" height="200"/>
</pattern>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<!-- background no filter -->
<rect width="1024" height="200" fill="url(#pat)"/>
<!-- foreground triangle, blurred -->
<path d="M0,0L1024,200H0Z" fill="url(#pat)" filter="url(#blur)"/>
</svg>
<div class="container">
<h1>some text</h1>
<p>Lorem ipsum</p>
</div>answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
answered Jan 3 at 9:24
KaiidoKaiido
45.5k467108
45.5k467108
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
add a comment |
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
What if I don't know the dimensions of the image?
– Pheric
Jan 6 at 8:29
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
@Pheric I can't really see why you won't, but you could build that svg from javascript after loading the image in an HTML <img> element
– Kaiido
Jan 6 at 9:00
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
it won't work properly if I have multiple pictures at different resolutions in a sideshow or something.
– Pheric
Jan 6 at 16:33
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018409%2fis-there-a-commonly-supported-way-to-make-a-skewed-frosted-glass-effect-in-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm not sure how to make this less broad. Would you rather have me close this question and ask multiple variants of the form "How can one make a full screen splash page divided in half by an angled div at 110 degrees from the horizontal with {SVG,CSS,HTML,clip-path,background images}?" and have some be wrong because I don't know how to? Asking in one question seems like the better option to me.
– Pheric
Jan 3 at 17:25
1
I don't think this question is too broad, though I would like to see this with compiled CSS instead of Sass, unless of course your question is specifically how to do it in Sass.
– TylerH
Jan 3 at 21:45