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