Как выровнять два линейных градиента?

Question

У меня есть два линейных градиента, один под другим, и я хочу, чтобы они были выровнены и оставались выровненными для всех размеров экрана.

Я хочу, чтобы это выглядело так:

(так что вы понимаете, что я имею в виду, когда говорю "выровнено"

Поскольку градиенты у меня сейчас есть, я могу выровнять их, указав определенные проценты, но на любом другом экране два градиента будут не выровненными.

<div style="background-image: linear-gradient(110deg, #0085CA 54%, #e3e3e3 54%); height: 50vh;"></div>
    <div style="background-image: linear-gradient(110deg, #ffffff 45%, #000 45%); height: 50vh;"></div>

Я искал ответы, но не смог найти ничего для этого конкретного случая, поэтому любая помощь будет очень полезна.

_{Свободный перевод вопроса How do I align two linear gradients? от участника @Adam Schwarz.}

Answer 1

Отрегулируйте background-size, и это будет легко. Хитрость заключается в том, чтобы сделать градиент равным двойному размеру элемента, чтобы он был равен размеру обоих элементов. Затем вы кладете один сверху, а другой снизу.

.box {
  height: 50vh;
  background-image: linear-gradient(110deg, #0085CA 50%, #e3e3e3 50%);
  background-position: top;
  background-size: 100% 200%;
}

.box + .box {
  background-image: linear-gradient(110deg, #ffffff 50%, #000 50%);
  background-position: bottom;
}

body {
  margin: 0;
}

<div class="box"></div>
<div class="box"></div>

Градиент, который вы также можете сгенерировать без элемента html и только с CSS:

html::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height: 50vh;
  padding-bottom:50vh;
  background: 
     linear-gradient(110deg, #0085CA 50%, #e3e3e3 50%) padding-box content-box,
     linear-gradient(110deg, #ffffff 50%, #000    50%);
}

Другая идея:

html::before {
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:-100%;
  right:-100%;
  background: 
     linear-gradient(#e3e3e3 50%,#000    0) right/50% 100% no-repeat,
     linear-gradient(#0085CA 50%,#ffffff 0);
  transform:skew(-20deg); /* 20 = 110 - 90 */
}

Еще один вариант с более сложным синтаксисом:

html{
  --s:calc(50vh * 0.363); /* this will control the  angle. 0.363 = tan(20deg)*/
  
  min-height:100%;
  background: 
     linear-gradient(to bottom right,#0085CA 50%,transparent 50.5%) calc(50% + var(--s)/2) 0,
     linear-gradient(to right, #0085CA 50.1%,#e3e3e3 0) top,
     linear-gradient(to top left    ,#000    50%,transparent 50.5%) calc(50% - var(--s)/2) 100%,
     linear-gradient(to right, #ffffff 49.9%, #000   0) bottom;
  background-size:var(--s) 50%,100% 50%;
  background-repeat:no-repeat;
}

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как выровнять два линейных градиента?

Ответы (1 шт):