1

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>
Christopher Dosin
  • 1,301
  • 9
  • 15
  • 1
    This would be helpful:https://stackoverflow.com/questions/29819502/how-to-make-half-square-background-in-css – Just code Nov 20 '18 at 05:01

1 Answers1

0

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%);

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Alexander Rice
  • 160
  • 1
  • 5