Kevin Powell - Community•4w ago

Aligning two diagonal gradients of separate elements

I have an HTML-header with background-image containing a linear-gradient, that wants to be vertically followed by another gradient. See the visual. Now I wonder if it's mathematically possible to align both gradients diagonal divisions, so it scales equally when the viewport changes – my guess is that the unequal height is the "issue". I've got full control over adding elements, embedding it in pseudo or extending the gradient rule which I all tried but failed. Should this be possible, in theory? currently seperate:

a {
  background-image: linear-gradient(130deg, $white 21.3%, $blue 21.35%, $blue 60%, transparent 60.1%);
  height: 320px; /* could be more, could be less */
}
b {
  background-image: linear-gradient(130deg, $yellow 10%, $green 10.1%, $green 60%, $purple 60.1%);
  height: 40px;
}

a {
  background-image: linear-gradient(130deg, $white 21.3%, $blue 21.35%, $blue 60%, transparent 60.1%);
  height: 320px; /* could be more, could be less */
}
b {
  background-image: linear-gradient(130deg, $yellow 10%, $green 10.1%, $green 60%, $purple 60.1%);
  height: 40px;
}

note: limegreen will be transparent

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Aligning two diagonal gradients of separate elements