2018-09-04画太极

第一种方法：笨方法 不停画圆即可实现。

HTML部分

Css部分

body{
  background-color: #444;
}
#YinYang{
  width:200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 100%);
  position: relative;
  margin:100px auto;
}

#YinYang > .one{
   
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: black;
  position: absolute;
  top:50px;
}

#YinYang > .two {
  width:100px;
  height: 100px;
  background: white;
  position: absolute;
  top:50px;
  left:100px;
  border-radius: 50%;
  
}
#YinYang > .three  {
  border: 1px solid black;
  width:25px;
  height:25px;
  background: white;
  position: absolute;
  top:85px;
  border-radius:50%;
  left:35px;
  
}
#YinYang > .four{
  border: 1px solid black;
  width:25px;
  height:25px;
  background: black;
  position: absolute;
  top:85px;
  border-radius:50%;
  left:140px;
  
}

效果图：

太极.png

第二种方法：利用伪类 before 和 after 。

HTML

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

#YinYang::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

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