使用三个div实现太极图的步骤如下：
HTML部分
<div class="box"> ???????<div class="yin"></div> ???????<div class="yang"></div> ???</div>
第一步，画一个宽高为300px的圆，并为其加上阴影（为了看起来有立体感）
.box{ ???????????width:300px; ???????????height:300px; ???????????margin:50px auto; ???????????position:relative; ???????????box-shadow:0 0 50px rgba(0,0,0,.8); ???????????background: #000; ???????????border-radius: 50%;
/*下面为实现旋转时所需代码*/ /*animation:rotation 2.5s linear infinite;
-webkit-animation:rotation 2.5s linear infinite;
-moz-animation:rotation 2.5s linear infinite;*/
???????}
出来的效果如下：
第二步，利用伪类实现左右两个半圆，一黑一白。宽为150px，高为300px;（这里我先设置为红蓝两色）
.box:before, ???????.box:after{ ???????????content:‘‘; ???????????display: block; ???????????width:150px; ???????????height:300px; ???????????/*position:absolute;*/ ???????????/*top:0;*/ ???????} ???????.box:before{ ???????????border-radius:150px 0 0 150px; ???????????background-color: red; ???????????left:0; ???????} ???????.box:after{ ???????????border-radius:0 150px 150px 0; ???????????background-color: blue; ???????????/*right: 0;*/ ???????}在没有进行定位时，效果如下：
通过定位可以实现底图的阴阳分隔效果。
第三步，依次画两个宽高都为200px的圆，一黑一白。上下定位。
.yin,.yang{ ???????????position: absolute; ???????????width:150px; ???????????height:150px; ???????????border-radius: 50%; ???????????left:75px; ???????????z-index: 99; ???????} ???????.yin{ ???????????background:#000; ???????????top:0; ???????} ???????.yang{ ???????????background: #fff; ???????????top:150px; ???????}其效果如下：
第四步，利用伪类实现最小的两个黑白小圆，并通过定位实现布局效果。
.yin:after,.yang:after{ ???????????width:75px; ???????????height:75px; ???????????border-radius: 50%; ???????????position: absolute; ???????????z-index: 999; ???????????display: block; ???????????content: ‘‘; ???????????left:25%; ???????????top:25%; ???????} ???????.yin:after{ ???????????background:#fff; ???????} ???????.yang:after{ ???????????background: #000; ???????}将底图样色做相应修改，得到最终效果如下：
绘制出太极图后我们可以通过CSS3中的@keyframes、animation动画实现旋转的太极图，具体代码如下：
@keyframes rotation { ???????0% {transform:rotate(0deg);} ???????100% {transform:rotate(360deg);} ???????} ???????@-webkit-keyframes rotation { ???????????0% {-webkit-transform:rotate(0deg);} ???????????100% {-webkit-transform:rotate(360deg);} ???????} ???????@-moz-keyframes rotation { ???????????0% {-moz-transform:rotate(0deg);} ???????????100% {-moz-transform:rotate(360deg);} ???????}CSS实现太极图（3个div实现）
原文地址：https://www.cnblogs.com/web12/p/10041178.html