Почему linear-gradient разделяется на 3 части?

Question

Здравствуйте, задал градиент для body. Но, почему-то экран разделяется на 3 части. Подскажите, пожалуйста, как сделать его сплошным. Или это возможно, если только задавать направления to left или to right?

background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);

Answer 1

#x{border: 5px solid red;}
body{
height: 30vh; /* наверно поэтому */
border: 5px solid blue;
background:
/* а вот как надо вайтспэйс`ить то что показываешь: */
  linear-gradient(
    217deg,
    rgba(255, 0, 0, .8),
    rgba(255, 0, 0, 0)
    70.71%
  ),
  linear-gradient(
    127deg,
    rgba(0, 255, 0, .8),
    rgba(0, 255, 0, 0)
    70.71%
  ),
  linear-gradient(
    336deg,
    rgba(0, 0, 255, .8),
    rgba(0, 0, 255, 0)
    70.71%
  );/* no-repeat; /* упс... :3 */
}
html{border-left: 20vw solid orange; /* background: gray; /*!!!!!!!!!!!!!!!!*/}

/* а что если... */
html{margin-top: 40vh;}
/* no repeat не забудь при этом включить */

<div id='x'>
  111111111111 111111<br>
  22222222222<br>
  333333333333333 33333333333333333
</div>

БЛОГ НА HUSL

Почему linear-gradient разделяется на 3 части?

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