Mixing
Slope keeps flowing when resize the browser (used clip-path)
2
I make the mask that has a slope, covers a half of the screen.
But when I resize the browser the slope part flows to the left side & angle changes like this.
Here’s the difference.
// Before resize
// After resize
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: relative;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
right: 0;
float: right;
clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%);
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>(I removed the menu part because the code went too long.)
Is there any solutions to stop flowing/collapsing angle against resize the browser?
Thanks
html css css3 mask clip-path
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
|
show 2 more comments
2
I make the mask that has a slope, covers a half of the screen.
But when I resize the browser the slope part flows to the left side & angle changes like this.
Here’s the difference.
// Before resize
// After resize
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: relative;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
right: 0;
float: right;
clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%);
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>(I removed the menu part because the code went too long.)
Is there any solutions to stop flowing/collapsing angle against resize the browser?
Thanks
html css css3 mask clip-path
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
Seems like you may have forgotten to add a link to the CodePen.
– Aaron McGuire
Nov 21 '18 at 23:22
can you hightlight the difference? not able to see .... and also post all the code with the question don't link to codepen
– Temani Afif
Nov 21 '18 at 23:25
@AaronMcGuire TemaniAfif Edited my question. Added CODEPEN link and highlighted the images.
– calmwave
Nov 21 '18 at 23:34
and we are far from having all the code in the question ...
– Temani Afif
Nov 21 '18 at 23:39
@TemaniAfif Did I miss something?
– calmwave
Nov 21 '18 at 23:41
|
show 2 more comments
2
2
2
I make the mask that has a slope, covers a half of the screen.
But when I resize the browser the slope part flows to the left side & angle changes like this.
Here’s the difference.
// Before resize
// After resize
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: relative;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
right: 0;
float: right;
clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%);
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>(I removed the menu part because the code went too long.)
Is there any solutions to stop flowing/collapsing angle against resize the browser?
Thanks
html css css3 mask clip-path
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
I make the mask that has a slope, covers a half of the screen.
But when I resize the browser the slope part flows to the left side & angle changes like this.
Here’s the difference.
// Before resize
// After resize
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: relative;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
right: 0;
float: right;
clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%);
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>(I removed the menu part because the code went too long.)
Is there any solutions to stop flowing/collapsing angle against resize the browser?
Thanks
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: relative;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
right: 0;
float: right;
clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%);
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: relative;
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
bottom: 0;
right: 0;
float: right;
clip-path: polygon(calc(80% - 6vw) 0, 100% 0, 100% 100%, calc(60% - 6vw) 100%);
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>html css css3 mask clip-path
html css css3 mask clip-path
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
edited Nov 22 '18 at 0:30
Temani Afif
74.5k94386
74.5k94386
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
asked Nov 21 '18 at 23:20
calmwavecalmwave
969
969
Seems like you may have forgotten to add a link to the CodePen.
– Aaron McGuire
Nov 21 '18 at 23:22
can you hightlight the difference? not able to see .... and also post all the code with the question don't link to codepen
– Temani Afif
Nov 21 '18 at 23:25
@AaronMcGuire TemaniAfif Edited my question. Added CODEPEN link and highlighted the images.
– calmwave
Nov 21 '18 at 23:34
and we are far from having all the code in the question ...
– Temani Afif
Nov 21 '18 at 23:39
@TemaniAfif Did I miss something?
– calmwave
Nov 21 '18 at 23:41
|
show 2 more comments
Seems like you may have forgotten to add a link to the CodePen.
– Aaron McGuire
Nov 21 '18 at 23:22
can you hightlight the difference? not able to see .... and also post all the code with the question don't link to codepen
– Temani Afif
Nov 21 '18 at 23:25
@AaronMcGuire TemaniAfif Edited my question. Added CODEPEN link and highlighted the images.
– calmwave
Nov 21 '18 at 23:34
and we are far from having all the code in the question ...
– Temani Afif
Nov 21 '18 at 23:39
@TemaniAfif Did I miss something?
– calmwave
Nov 21 '18 at 23:41
Seems like you may have forgotten to add a link to the CodePen.
– Aaron McGuire
Nov 21 '18 at 23:22
Seems like you may have forgotten to add a link to the CodePen.
– Aaron McGuire
Nov 21 '18 at 23:22
can you hightlight the difference? not able to see .... and also post all the code with the question don't link to codepen
– Temani Afif
Nov 21 '18 at 23:25
can you hightlight the difference? not able to see .... and also post all the code with the question don't link to codepen
– Temani Afif
Nov 21 '18 at 23:25
@AaronMcGuire TemaniAfif Edited my question. Added CODEPEN link and highlighted the images.
– calmwave
Nov 21 '18 at 23:34
@AaronMcGuire TemaniAfif Edited my question. Added CODEPEN link and highlighted the images.
– calmwave
Nov 21 '18 at 23:34
and we are far from having all the code in the question ...
– Temani Afif
Nov 21 '18 at 23:39
and we are far from having all the code in the question ...
– Temani Afif
Nov 21 '18 at 23:39
@TemaniAfif Did I miss something?
– calmwave
Nov 21 '18 at 23:41
@TemaniAfif Did I miss something?
– calmwave
Nov 21 '18 at 23:41
|
show 2 more comments
1 Answer
1
active
oldest
votes
1
Instead of clip-path you can consider a background where you will use gradient. You will have a better support and you can keep the angle the same:
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
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%2f53421812%2fslope-keeps-flowing-when-resize-the-browser-used-clip-path%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
1
Instead of clip-path you can consider a background where you will use gradient. You will have a better support and you can keep the angle the same:
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
add a comment |
1
Instead of clip-path you can consider a background where you will use gradient. You will have a better support and you can keep the angle the same:
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
add a comment |
1
1
1
Instead of clip-path you can consider a background where you will use gradient. You will have a better support and you can keep the angle the same:
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
Instead of clip-path you can consider a background where you will use gradient. You will have a better support and you can keep the angle the same:
#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>#home {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#home:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
background:
linear-gradient(120deg,transparent 49.9%,rgba(0, 0, 0, 0.5) 50%) center right/80% 300%;
background-repeat:no-repeat;
}
#home-image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}<section id="home">
<div id="home-image">
<img src="img/background.jpg" alt="">
</div>
<div id="home-menu">
<ul>
<li>HOME</li>
<li>PAGES</li>
<li>CONTACT</li>
<li>ABOUT</li>
</ul>
</div>
</section>answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
answered Nov 22 '18 at 0:25
Temani AfifTemani Afif
74.5k94386
74.5k94386
add a comment |
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%2f53421812%2fslope-keeps-flowing-when-resize-the-browser-used-clip-path%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
Seems like you may have forgotten to add a link to the CodePen.
– Aaron McGuire
Nov 21 '18 at 23:22
can you hightlight the difference? not able to see .... and also post all the code with the question don't link to codepen
– Temani Afif
Nov 21 '18 at 23:25
@AaronMcGuire TemaniAfif Edited my question. Added CODEPEN link and highlighted the images.
– calmwave
Nov 21 '18 at 23:34
and we are far from having all the code in the question ...
– Temani Afif
Nov 21 '18 at 23:39
@TemaniAfif Did I miss something?
– calmwave
Nov 21 '18 at 23:41