Sie einen Viertel-Kreisring mit 1 div

Question

ich ein Viertel Ring erstellt haben

 .quarter { 
      position:absolute; 
      width:50%; 
      height:50%; 
      transition:background-color 0.2s ease-in-out; 
     } 
     .quarter1 { 
      top:0; 
      left:0; 
      border-radius:100% 0 0 0; 
     } 
     .main-container { 
      height: 200px; 
      width: 200px 
     } 

     .cutout { 
      width:50%; 
      height:50%; 
      background-color:white; 
      position:absolute; 
      top:25%; 
      left:25%; 
      border-radius:50%; 
      pointer-events:none; 
     } 

HTML CODE

<div class="main-container"> 
    <div class="quarter quarter1"></div> 
    <div class="cutout"></div> 
</div> 

den folgenden Code verwenden Dies erzeugt die folgende

Ich möchte zu wissen, ob es möglich ist, das oben genannte mit nur 1 div und den mask/clipping Eigenschaften zu tun.

Answer 1

Sie können auch mit radialen Gradienten arbeiten.

.quarter_ring { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: radial-gradient(ellipse at 100% 100%, transparent 0%, transparent 40%, red 41%, Red 70%, transparent 71%, transparent 100%); 
 
}

<div class='quarter_ring'></div>