<div></div>
<div></div>
<div></div>
<div></div>

@use 'sass:math';

$s: .5em;

$l: 3em;
$a: 120deg;
$b: .5*$a;

body {
	box-sizing: border-box;
	display: grid;
	grid-gap: $s;
	margin: 0;
	padding: $s;
	height: 100vh;
	background: silver;
	
	@media (min-width: 25em) {
		grid-template-columns: 1fr 1fr
	}
}

div {
	box-shadow: 2px 2px 5px rgba(#000, .5);
	
	&:nth-child(1) {
		$c: 180deg - $b;
		$w: 2*$l*math.sin($b);
		$h: 2*2*$l*math.cos($b);
		
		background: 
			linear-gradient(#8db183 0 0), 
			linear-gradient(90deg, #000 50%, #fff 0), 
			conic-gradient(from $c at 50% 0, transparent $a, #fff 0%), 
			conic-gradient(from $c, #fff $a, #000 0%);
		background-size: $w $h, 2*$w, $w $h;
		background-blend-mode: lighten, difference
	}
	
	&:nth-child(2) {
		$c: 90deg - $b;
		$w: 2*2*$l*math.cos($b);
		$h: 2*2*$l*math.sin($b);
		
		background: 
			linear-gradient(#a07f7a 0 0), 
			linear-gradient(#000 50%, #fff 0) 0 .25*$h, 
			conic-gradient(from $c at 0, transparent $a, #fff 0%), 
			conic-gradient(from $c, #fff $a, #000 0%);
		background-size: $w $h;
		background-blend-mode: lighten, difference
	}
	
	&:nth-child(3) {
		$c: 180deg - $b;
		$w: 2*$l*math.sin($b);
		$h: 2*2*$l*math.cos($b);
		
		background: 
			linear-gradient(#b84c59 0 0), 
			linear-gradient(90deg, #000 50%, #fff 0), 
			conic-gradient(from $c at 50% 0, transparent $a, #fff 0%), 
			conic-gradient(from $c, #fff $a, #000 0%);
		background-size: $w $h, 3*$w, $w $h;
		background-blend-mode: lighten, difference
	}
	
	&:nth-child(4) {
		$c: 90deg - $b;
		$w: $l*math.cos($b);
		$h: $l*math.sin($b);
		
		background: 
			linear-gradient(#f98f53 0 0), 
			conic-gradient(at 0 2*$h, 
					#000 25%, #fff 0% $a + $c, #000 0%), 
			conic-gradient(from $c at 0 $h, transparent $a, #fff 0%), 
			conic-gradient(from $c at 50% $h, #fff $a, #000 0%);
		background-size: 2*$w 3*$h;
		background-blend-mode: lighten, difference
	}
}