大概就是上面这个样子
我们准备 两个半圆，两个大圆，两个小圆，然后稍微的进行覆盖就行~
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 ?????8 ????#big{ 9 ????????height: 300px;10 ????????width: 300px;11 ????????background: #AFAFAF;12 ????}13 ????#biga{14 ????????height: 150px;15 ????????width: 300px;16 ????????background: black;17 ????????border-top-left-radius: 150px;18 ????????border-top-right-radius: 150px;19 ????}20 ????#bigb{21 ????????background: white;22 ????????height: 150px;23 ????????width: 300px;24 ????????border-bottom-left-radius: 150px;25 ????????border-bottom-right-radius: 150px;26 ????}27 ????#lita{28 ????????height: 150px;29 ????????width: 150px;30 ????????background: white;31 ????????position: absolute;32 ????????top: 80px;33 ????????border-radius: 50%;34 ????}35 ????#litb{36 ????????height: 150px;37 ????????width: 150px;38 ????????background: black;39 ????????position: absolute;40 ????????top: 80px;41 ????????left: 158px;42 ????????border-radius: 50%;43 ????}44 ????#litta{45 ????????height: 50px;46 ????????width: 50px;47 ????????background: black;48 ????????position: absolute;49 ????????top: 132px;50 ????????left: 60px;51 ????????border-radius: 50%;52 ????}53 ????#littb{54 ????????height: 50px;55 ????????width: 50px;56 ????????background: white;57 ????????position: absolute;58 ????????top: 135px;59 ????????left:205px;60 ????????border-radius: 50%;61 ????}62 </style>63 </head>64 65 <body>66 <div id="big">67 ????<div id="biga">68 ????????69 ????</div>70 ????71 ????<div id="bigb">72 ????????73 ????</div>74 ????75 </div>76 <div id="lita">77 ????????78 </div>79 <div id="litb">80 ????????81 </div>82 <div id="litta">83 ????????84 </div>85 <div id="littb">86 ????????87 </div>88 </body>89 </html>实训H5+CSS 太极图
原文地址：http://www.cnblogs.com/yinghualuowu/p/7486067.html