<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box {
  height: 120px;
  aspect-ratio: 1;
  display: inline-block;
  margin: 10px;
  outline: 2px dashed green;
}
:nth-child(1 of .box) {
  background-image: repeating-conic-gradient(#000 0 25%,#fff 0 50%);
}
:nth-child(2 of .box) {
  background-image: repeating-conic-gradient(#000 0 12.5%,#fff 0 25%);
}
:nth-child(3 of .box) {
  aspect-ratio: 2;
  background-image: 
    conic-gradient(
      #fff atan(2), #000 0 calc(180deg - atan(2)),
      #fff 0 180deg,#000 0 calc(180deg + atan(2)),
      #fff 0 calc(360deg - atan(2)),#000 0);
}

;