05/12/2024

<div class="cir cir1">
  <div class="cir-in cir-in1"></div>
</div>
<div class="cir cir2">
  <div class="cir-in cir-in2"></div>
</div>
<div class="cir cir3">
  <div class="cir-in cir-in3"></div>
</div>
<style>
  :root {
    --h_c1: 12.5rem;
    --h_c2: 6.25rem;
    --h_c3: 3.1rem;
  }
  body {
    background: #F2EAA8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
  }
  .cir {
    border-radius: 50%;
    background: #DE6B67;
    position: relative;
  }
  .cir1 {width:var(--h_c1); height:var(--h_c1)}
  .cir2 {width:var(--h_c2); height:var(--h_c2)}
  .cir3 {width:var(--h_c3); height:var(--h_c3)}
<p>.cir-in {background: #7E6293; position: absolute;}
.cir-in1 {
width:var(&ndash;h_c1);
height:calc(var(&ndash;h_c1)/2);
border-radius: var(&ndash;h_c1) var(&ndash;h_c1) 0 0;
}
.cir-in2 {
width:var(&ndash;h_c2);
height:calc(var(&ndash;h_c2)/2);
border-radius: 0 0 var(&ndash;h_c2) var(&ndash;h_c2);
bottom: 0;
}
.cir-in3 {
width:var(&ndash;h_c3);
height:calc(var(&ndash;h_c3)/2);
border-radius: var(&ndash;h_c3) var(&ndash;h_c3) 0 0;
}
</style></p>