tiled-conic-gradients-ref.html (981B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <style> 4 .bar { 5 width: 200px; 6 height: 40px; 7 } 8 .box { 9 display: inline-block; 10 width: 40px; 11 height: 40px; 12 background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0); 13 } 14 </style> 15 <div class="bar"> 16 <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 17 </div> 18 <div class="bar"> 19 <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 20 </div> 21 <div class="bar"> 22 <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 23 </div> 24 <div class="bar"> 25 <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 26 </div> 27 <div class="bar"> 28 <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 29 </div>