html - 如何仅使用 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

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

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