2017-05-17 6 views

Antwort

2

Der erste Hintergrund ist repeating-linear-gradient einfach mit:

body { 
 
    height:100vh; 
 
    width:100vw; 
 
    background:repeating-linear-gradient(
 
    to bottom, 
 
    #58D68D 0, 
 
    #58D68D 30px, 
 
    #2ECC71 30px, 
 
    #2ECC71 60px 
 
); 
 
}

Der zweite Hintergrund viel komplizierter ist und sollte nicht eine CSS-Lösung sein. Ich empfehle stattdessen eine background-image zu verwenden!

Es ist nicht unmöglich, es mit CSS zu lösen (mit perspective):

body { 
 
    transform: perspective(100em) rotateX(50deg) scale(2); 
 
    overflow:hidden; 
 
} 
 
div { 
 
    height:100vh; 
 
    width:100vw; 
 
    background:repeating-linear-gradient(
 
    to bottom, 
 
    rgba(46, 204, 113, 0.5) 0, 
 
    rgba(46, 204, 113, 0.5) 30px, 
 
    rgba(88, 214, 141, 0.5) 30px, 
 
    rgba(88, 214, 141, 0.5) 60px 
 
), repeating-linear-gradient(
 
    to right, 
 
    rgba(46, 204, 113, 0.5) 0, 
 
    rgba(46, 204, 113, 0.5) 30px, 
 
    rgba(88, 214, 141, 0.5) 30px, 
 
    rgba(88, 214, 141, 0.5) 60px 
 
); 
 
}
<div></div>

+0

Danke Sebastian – Jay

+0

@Jay - kein Problem, fühl dich frei, als gelöst zu markieren;) –