<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
}