第一种方法：笨方法 不停画圆即可实现。
HTML部分
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title></head><body><div id="YinYang"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div></div></body></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
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title></head><body><div id="YinYang"> </div></body></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;
}
作者：饥人谷_鱼鱼鱼
链接：https://www.jianshu.com/p/68fc230227f9