太极图实现起来很简单，就是把多个标签利用border-radius设置成圆形，然后多个圆利用position定位重叠在一起
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>太极图</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .circlebox { 12 width: 300px; 13 height: 300px; 14 margin: 100px auto; 15 position: relative; 16 animation: move 2s linear infinite; 17 } 18 .circleblack { 19 width: 300px; 20 height: 300px; 21 background-color: black; 22 border-radius: 50%; 23 } 24 .circlewhite { 25 width: 150px; 26 height: 300px; 27 background-color: white; 28 border-top-right-radius: 150px; 29 border-bottom-right-radius: 150px; 30 position: absolute; 31 top: 0; 32 right: 0; 33 } 34 .circlebb { 35 width: 150px; 36 height: 150px; 37 background: black; 38 border-radius: 50%; 39 position: absolute; 40 top: 0; 41 left: 75px; 42 } 43 .circleww { 44 width: 150px; 45 height: 150px; 46 background: white; 47 border-radius: 50%; 48 position: absolute; 49 bottom: 0; 50 left: 75px; 51 } 52 .circlebbl { 53 width: 40px; 54 height: 40px; 55 background: black; 56 position: absolute; 57 bottom: 55px; 58 left: 130px; 59 border-radius: 50%; 60 } 61 .circlewwl { 62 width: 40px; 63 height: 40px; 64 background: #fff; 65 position: absolute; 66 top: 55px; 67 left: 130px; 68 border-radius: 50%; 69 } 70 @keyframes move { 71 from {transform: rotate(0deg);} 72 to {transform: rotate(360deg);} 73 } 74 </style> 75 </head> 76 <body> 77 <div class="circlebox"> 78 <div class="circleblack"></div> 79 <div class="circlewhite"></div> 80 <div class="circlebb"></div> 81 <div class="circleww"></div> 82 <div class="circlebbl"></div> 83 <div class="circlewwl"></div> 84 </div> 85 </body> 86 </html>