如何仅使用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帮助我创建Circle的内部结构，如前所述：）

Answer 1

使用此css

＆＃13;

＆＃13;

#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%; 	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;
} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;