1049499-1.html (663B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Choose the correct gradient repeat count even when there's a non-identity pattern matrix</title> 5 6 <style> 7 8 html { 9 overflow: hidden; 10 } 11 12 div { 13 box-sizing: border-box; 14 width: 240px; 15 height: 320px; 16 17 /* Scale a 240x320 gradient down by a factor of 8 into a 30x40 border image. */ 18 /* 240x320 gives a diagonal of 400px, so we should get 5 repetitions of a 80px long gradient. */ 19 /* tan(36.8698976deg) == 240 / 320 */ 20 border-left: 30px solid; 21 border-top: 40px solid; 22 border-image: repeating-linear-gradient(-36.8698976deg, blue, blue 40px, lime 40px, lime 80px); 23 } 24 25 </style> 26 27 <div></div>