使用一个div实现太极图的步骤如下：
HTML部分：
<body> ???<div class="box-taiji"> ???</div></body>
第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;
.box-taiji{ ???????????width:0; ???????????height:300px; ???????????position:relative; ???????????margin: 50px auto; ???????????border-left:150px solid #000; ???????????border-right:150px solid #fff; ???????????box-shadow: 0 0 30px rgba(0,0,0,0.5); ???????????border-radius: 300px; ???????}效果如下：
第二步，通过伪类，实现一个一个白色的圆形，定位好位置。同时，利用box-shadow:0 200px 0 #000;实现同样大小的圆，放好。
.box-taiji:after{ ???????????width:150px; ???????????height:150px; ???????????position:absolute; ???????????content: ‘‘; ???????????display: block; ???????????top:0; ???????????left:-75px; ???????????z-index: 1; ???????????background-color: #fff; ???????????border-radius:50%; ???????????box-shadow:0 150px 0 #000; ???????}先后实现的效果如下：
第三步，同样第二步一样的原理，再实现黑白两个圆，放到相关的位置。
.box-taiji:before { ???????????content:‘‘; ???????????position:absolute; ???????????display: block; ???????????width:75px; ???????????height:75px; ???????????top:38px; ???????????left:-38px; ???????????z-index:2; ???????????background-color:#000; ???????????border-radius:50%; ???????????box-shadow:0 150px 0 #fff; ???????}最终效果如下：
和用上一篇3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。
CSS实现太极图（1个div实现）
原文地址：https://www.cnblogs.com/web12/p/10041363.html