HTML CSSのみを使用して円を作成するにはどうすればよいですか？

Question

私は上記の画像を持っており、このサークル構造をHTML CSSで作成したいと考えています。

HTML：

<div class="circle"></div> 

はCSS：

.circle { 
    width: 96px; 
    height: 96px; 
    background: #eee; 
    border-color: red; 
    border-style: solid; 
    border-radius: 100%; 
    position: relative; 
} 

HTML CSSを使って、上記の画像のようなサークルの内部構造を作成するために私を助けてください、事前に感謝:)

Answer 1

使用このCSS

#yin-yang { 
 
    width: 96px; 
 
    height: 48px; 
 
    background: #eee; 
 
    border-color: red; 
 
    border-style: solid; 
 
    border-width: 2px 2px 50px 2px; 
 
    border-radius: 100%; 
 
    position: relative; 
 
} 
 

 
#yin-yang:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; \t left: 0; 
 
    background: #eee; 
 
    border: 18px solid red; 
 
    border-radius: 100%; 
 
    width: 12px; 
 
    height: 12px; 
 
} 
 

 
#yin-yang:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    background: red; 
 
    border: 18px solid #eee; 
 
    border-radius:100%; 
 
    width: 12px; 
 
    height: 12px; 
 
}

<div id="yin-yang"></div>