KPC
Kevin Powell - Community•3mo ago
Simon

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
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?