CSS ruiten patroon met linear-gradient

[Xthemes.us]

Ik probeer een driehoek patroon te maken m.b.v. CSS gradients. Het probleem lijkt echter te zijn dat afhankelijk van de dat de gradients van positie verschieten en het idee een beetje om zeep helpt.

Ik heb hier een codepen aangemaakt waar je het probleem kunt zien.
https://codepen.io/axeia/pen/omXgEV

Het idee is dat dit eruit komt (afhankelijk van hoe je de codepen UI versleept werkt dat ook):


Echter als je de codepen code-velden links of rechts neerzet en de grootte aanpast zul je zien dat alles verspringt en tot ongewenste resultaten leid. Ik heb geprobeerd m.b.v. background-position te verhelpen zonder succes.

Code op codepen:

Cascading Stylesheet:

body{
  background-color: teal;
  background-image: 
    repeating-linear-gradient(65deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 2px, transparent 2px, transparent 280px), 
    /*Moves depending on viewport size?*/
    repeating-linear-gradient(295deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 2px, transparent 2px, transparent 280px), 
    repeating-linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2) 2px, transparent 2px, transparent 328px);
  background-position: top 0 left 0,
                       top 0 left 0,
                       top 0 left 0;
  background-attachment: fixed;
}

edit:

Lijkt erop dat ik background-size moet gebruiken. Toevoegen van "background-size: 310px 656px;" komt in de buurt, maar ik ben bang dat ik alles moet gaan uitrekenen wil ik de juiste dimensies overal neer willen zetten. Ik had de hoop dat ik met een beetje gokken en trial en error eruit zou komen.

[edit2]
Gradient #3 @ 332px
en
background-size: 310px 664px;

Lijkt te werken.

[ Voor 12% gewijzigd door Xthemes.us op 23-01-2019 19:05 ]