| <!doctype html> |
| <meta charset="utf-8"> |
| <style> |
| .bar { |
| width: 200px; |
| height: 40px; |
| } |
| .box { |
| display: inline-block; |
| width: 40px; |
| height: 40px; |
| background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0); |
| } |
| </style> |
| <div class="bar"> |
| <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> |
| </div> |
| <div class="bar"> |
| <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> |
| </div> |
| <div class="bar"> |
| <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> |
| </div> |
| <div class="bar"> |
| <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> |
| </div> |
| <div class="bar"> |
| <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> |
| </div> |