CSS實現太極圖（1個div實現）
阿新 • • 發佈：2018-11-29
使用一個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動畫實現旋轉太極圖。