CSS second half background which goes from one edge to another [duplicate]
This question already has an answer here:
How to make half-square background in css
3 answers
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}<div class="background"></div>css
asked Nov 20 at 4:53
Christopher Dosin
1687
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 9:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
How to make half-square background in css
3 answers
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}<div class="background"></div>css
asked Nov 20 at 4:53
Christopher Dosin
1687
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 9:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
This would be helpful:stackoverflow.com/questions/29819502/…
– Just code
Nov 20 at 5:01
add a comment |
This question already has an answer here:
How to make half-square background in css
3 answers
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}<div class="background"></div>css
asked Nov 20 at 4:53
Christopher Dosin
1687
This question already has an answer here:
How to make half-square background in css
3 answers
I'm trying to make a second background which should go from one edge to another edge. So in my example: The red BG should go from the top right, to the bottom left.
The question for me is, how would you/can i do this also for the Responsive view? So if i resize the window, the edges of the red background won't fit the actual edge anymore. Is this even possible with CSS, that the edges will always fit? I'm stuck at this point regarding the Responsive trick .. :)
Because if the screen is smaller you would have to adjust the 120deg, don't you? Media Queries are not really an option, because those are only working with Breakpoints. But it should work with every resized pixel.
Here's my example:
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}<div class="background"></div>This question already has an answer here:
How to make half-square background in css
3 answers
.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}<div class="background"></div>.background {
width: 100%;
max-width: 700px;
height: 300px;
background: gray;
position: relative;
}
.background:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(120deg, #cf0529 50%, transparent 50%);
}<div class="background"></div>css
css
asked Nov 20 at 4:53
Christopher Dosin
1687
asked Nov 20 at 4:53
Christopher Dosin
1687
asked Nov 20 at 4:53
Christopher Dosin
1687
asked Nov 20 at 4:53
Christopher Dosin
1687
asked Nov 20 at 4:53
Christopher Dosin
1687
1687
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 9:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 at 9:00
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
This would be helpful:stackoverflow.com/questions/29819502/…
– Just code
Nov 20 at 5:01
add a comment |
1
This would be helpful:stackoverflow.com/questions/29819502/…
– Just code
Nov 20 at 5:01
1
1
This would be helpful:stackoverflow.com/questions/29819502/…
– Just code
Nov 20 at 5:01
This would be helpful:stackoverflow.com/questions/29819502/…
– Just code
Nov 20 at 5:01
add a comment |
1 Answer
1
active
oldest
votes
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
edited Nov 20 at 8:57
Temani Afif
64.7k93675
answered Nov 20 at 5:12
Alexander Rice
813
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
edited Nov 20 at 8:57
Temani Afif
64.7k93675
answered Nov 20 at 5:12
Alexander Rice
813
add a comment |
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
edited Nov 20 at 8:57
Temani Afif
64.7k93675
answered Nov 20 at 5:12
Alexander Rice
813
add a comment |
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
edited Nov 20 at 8:57
Temani Afif
64.7k93675
answered Nov 20 at 5:12
Alexander Rice
813
See this reference here:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The gradient you want would be:
background: linear-gradient(to bottom left, #cf0529 50%, transparent 50%);
edited Nov 20 at 8:57
Temani Afif
64.7k93675
answered Nov 20 at 5:12
Alexander Rice
813
edited Nov 20 at 8:57
Temani Afif
64.7k93675
edited Nov 20 at 8:57
Temani Afif
64.7k93675
edited Nov 20 at 8:57
Temani Afif
64.7k93675
64.7k93675
answered Nov 20 at 5:12
Alexander Rice
813
answered Nov 20 at 5:12
Alexander Rice
813
answered Nov 20 at 5:12
Alexander Rice
813
813
add a comment |
add a comment |
1
This would be helpful:stackoverflow.com/questions/29819502/…
– Just code
Nov 20 at 5:01