私は四半期のリングを作成している1つのdiv

Question

と四半期円形リングを作る

 .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コード

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

これは私が希望

次を作成します1 divとマスク/クリッピングプロパティを使って上記を行うことができるかどうかを知るために。

Answer 1

放射状のグラデーションで行うこともできます。

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