<div class="b1"></div>
+
<div class="b2"></div>
+
<div class="b3"></div>
=
<div class="full"></div>

div[class] {
  width: 150px;
  aspect-ratio: 1;
  border:1px solid;
}
.b1 {
  --s: 150px; /* control the size */
  
  --_g: #fff220 36deg, #0000 0;   
  background:
    conic-gradient(from 162deg at calc(var(--s) * .5)  calc(var(--s) * .68), var(--_g)),
    #e181c2;
}
.b2 {
  --s: 150px; /* control the size */
  
  --_g: #fff220 36deg, #0000 0;   
  background:
    conic-gradient(from 18deg  at calc(var(--s) * .19) calc(var(--s) * .59), var(--_g)),
    #e181c2;
}
.b3 {
  --s: 150px; /* control the size */
  
  --_g: #fff220 36deg, #0000 0;   
  background:
    conic-gradient(from 306deg at calc(var(--s) * .81) calc(var(--s) * .59), var(--_g)),
    #e181c2;
}
.full {
  --s: 150px; /* control the size */
  
  --_g: #fff220 36deg, #0000 0;   
  background:
    conic-gradient(from 162deg at calc(var(--s) * .5)  calc(var(--s) * .68), var(--_g)),
    conic-gradient(from 18deg  at calc(var(--s) * .19) calc(var(--s) * .59), var(--_g)),
    conic-gradient(from 306deg at calc(var(--s) * .81) calc(var(--s) * .59), var(--_g)),
    #e181c2;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  align-items: center;
  grid-auto-flow: column;
  gap: 10px;
  font-size: 50px;
  font-weight: bold;
}