使用一个div实现太极图的步骤如下：
HTML部分：
<body>
<div class="box-taiji">
</div>
</body>
第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;
.box-taiji{
width:;
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:;
left:-75px;
z-index:;
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:;
background-color:#000;
border-radius:50%;
box-shadow:0 150px 0 #fff;
}
最终效果如下：
和用上一篇3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。