linear-repeat-1g.html (708B)
1 <body style="overflow:hidden"> 2 <div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px); 3 background-size: 300px 200px; background-repeat: no-repeat; 4 width: 800px; height: 800px; 5 margin-bottom: -600px;"></div> 6 <!-- making the gradient actually be 300px high isn't reliable since 7 the stop positions cannot be exactly represented and rounding errors 8 creep in. So just let the gradient be 200px high and pad out to match 9 the reference. --> 10 <div style="background: black; width: 300px; height: 50px;"></div> 11 <div style="background: white; width: 300px; height: 50px;"></div> 12 </body>