<div></div>

$s: 2em;
$d: 2*$s;
$q: 4*$s;
$c: .25*$s;

body {
  margin: 0;
  background: 
    repeating-conic-gradient(#cff 0% 25%, lime 0% 50%) 0 0/ #{$q $q};
}

body, div { height: 100vh }

div {
  background: 
    linear-gradient(90deg, #fff 50%, transparent 0) #{-$s}/ #{$q}, 
    repeating-conic-gradient(from 45deg, #fff 0% 25%, #000 0% 50%) 0 0/ #{$s $s};
  background-blend-mode: difference;
  --list: red #{$c}, transparent 0 calc(100% - #{$c}), red 0;
  mask: 
    linear-gradient(45deg, var(--list)), 
    linear-gradient(-45deg, var(--list));
  mask-size: $d $d
}