CSS clip-path breaks pseudo ::before element stack order
I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body
background: url(bg-lanterns.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
Creating a non-rectangular element is also easy by using clip-path like this:
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
<main></main>css pseudo-element clip-path
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
add a comment |
I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body
background: url(bg-lanterns.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
Creating a non-rectangular element is also easy by using clip-path like this:
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
<main></main>css pseudo-element clip-path
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
Could you share a live example?
– extempl
Nov 14 '18 at 18:21
I added a snippet.
– Besworks
Nov 14 '18 at 18:26
So do you need to get rid of these white top/bottom shadows, right? Or instead, do you need to get the white blur effect?
– extempl
Nov 14 '18 at 18:37
The final result should have the blurry white effect to the background like in the first screenshot but with the angled dimensions of the second second screenshot (notice that the background is only transparent white and not blurred in the second image).
– Besworks
Nov 14 '18 at 18:40
add a comment |
I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body
background: url(bg-lanterns.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
Creating a non-rectangular element is also easy by using clip-path like this:
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
<main></main>css pseudo-element clip-path
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
I'm trying to create a frosted glass effect on a non-rectangular element but it's not working out. I'm experiencing an odd issue that I can't seem to wrap my head around...
The frosted glass effect is easy to accomplish by setting a fixed background-image on the document body, adding a partially transparent background color to the element and creating a ::before pseudo element with the same fixed background-image and applying a blur filter. Like so:
body
background: url(bg-lanterns.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
Creating a non-rectangular element is also easy by using clip-path like this:
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
But trying to combine these two effects breaks the stacking order and causes the ::before element to appear above the white background.
I get the same result in Chrome and Firefox so I'm wondering if this is the expected behavior and I'm simply doing something wrong... Can anybody shed some light on what is happening here?
Here's a live demo:
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
<main></main> body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
<main></main> body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
<main></main>css pseudo-element clip-path
css pseudo-element clip-path
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
edited Nov 14 '18 at 18:24
Besworks
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
asked Nov 14 '18 at 18:17
BesworksBesworks
1568
1568
Could you share a live example?
– extempl
Nov 14 '18 at 18:21
I added a snippet.
– Besworks
Nov 14 '18 at 18:26
So do you need to get rid of these white top/bottom shadows, right? Or instead, do you need to get the white blur effect?
– extempl
Nov 14 '18 at 18:37
The final result should have the blurry white effect to the background like in the first screenshot but with the angled dimensions of the second second screenshot (notice that the background is only transparent white and not blurred in the second image).
– Besworks
Nov 14 '18 at 18:40
add a comment |
Could you share a live example?
– extempl
Nov 14 '18 at 18:21
I added a snippet.
– Besworks
Nov 14 '18 at 18:26
So do you need to get rid of these white top/bottom shadows, right? Or instead, do you need to get the white blur effect?
– extempl
Nov 14 '18 at 18:37
The final result should have the blurry white effect to the background like in the first screenshot but with the angled dimensions of the second second screenshot (notice that the background is only transparent white and not blurred in the second image).
– Besworks
Nov 14 '18 at 18:40
Could you share a live example?
– extempl
Nov 14 '18 at 18:21
Could you share a live example?
– extempl
Nov 14 '18 at 18:21
I added a snippet.
– Besworks
Nov 14 '18 at 18:26
I added a snippet.
– Besworks
Nov 14 '18 at 18:26
So do you need to get rid of these white top/bottom shadows, right? Or instead, do you need to get the white blur effect?
– extempl
Nov 14 '18 at 18:37
So do you need to get rid of these white top/bottom shadows, right? Or instead, do you need to get the white blur effect?
– extempl
Nov 14 '18 at 18:37
The final result should have the blurry white effect to the background like in the first screenshot but with the angled dimensions of the second second screenshot (notice that the background is only transparent white and not blurred in the second image).
– Besworks
Nov 14 '18 at 18:40
The final result should have the blurry white effect to the background like in the first screenshot but with the angled dimensions of the second second screenshot (notice that the background is only transparent white and not blurred in the second image).
– Besworks
Nov 14 '18 at 18:40
add a comment |
1 Answer
1
active
oldest
votes
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main>answered Nov 14 '18 at 19:18
BesworksBesworks
1568
1
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
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
);
);
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%2f53306479%2fcss-clip-path-breaks-pseudo-before-element-stack-order%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main>answered Nov 14 '18 at 19:18
BesworksBesworks
1568
1
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
add a comment |
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main>answered Nov 14 '18 at 19:18
BesworksBesworks
1568
1
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
add a comment |
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main>answered Nov 14 '18 at 19:18
BesworksBesworks
1568
According to the specification for clip-path:
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
I managed to achieve the desired effect by adding the white color to an ::after pseudo element and clipping both pseudo elements instead of the element itself.
body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main> body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main> body
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
main
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
main::before,
main::after
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
main::before
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
main::after
background: rgba(255,255,255,0.7);
<main> <span> test </span> </main>answered Nov 14 '18 at 19:18
BesworksBesworks
1568
edited Nov 14 '18 at 19:48
answered Nov 14 '18 at 19:18
BesworksBesworks
1568
answered Nov 14 '18 at 19:18
BesworksBesworks
1568
answered Nov 14 '18 at 19:18
BesworksBesworks
1568
1568
1
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
add a comment |
1
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
1
1
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
That's exact solution what I was about to add. Yes, there is a definitely some index change after adding clip-path to initial element.
– extempl
Nov 14 '18 at 19:30
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
So it would seem. I find that to be rather strange behavior but apparently it's per the spec (drafts.fxtf.org/css-masking-1/#the-clip-path). I actually had to add z-index: -1 to ::before and ::after otherwise my content ended up buried at the bottom of the stack.
– Besworks
Nov 14 '18 at 19:43
add a comment |
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.
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%2f53306479%2fcss-clip-path-breaks-pseudo-before-element-stack-order%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
Could you share a live example?
– extempl
Nov 14 '18 at 18:21
I added a snippet.
– Besworks
Nov 14 '18 at 18:26
So do you need to get rid of these white top/bottom shadows, right? Or instead, do you need to get the white blur effect?
– extempl
Nov 14 '18 at 18:37
The final result should have the blurry white effect to the background like in the first screenshot but with the angled dimensions of the second second screenshot (notice that the background is only transparent white and not blurred in the second image).
– Besworks
Nov 14 '18 at 18:40