今天看见群里有朋友提问“十”如何用两个div完成。其实很简单，方法也有很多种，为什么他不先思考一下再问呢？或许这就是惰性和依赖性吧。
随便想了一下，不想用定位，那就用负边距来实现吧。DEMO（十1）
.d1_h{float:left;width:100px;height:30px;margin-top:35px;background-color:#f00;}
.d1_s{float:left;width:30px;height:100px;margin-left:-65px;background-color:#f00;}
群里也有朋友用定位实现了。DEMO（十2）
.d2_h{position:absolute;top:35px;left:0;width:100px;height:30px;background-color:#aaa;}
.d2_s{position:absolute;top:0;left:35px;width:30px;height:100px;background-color:#aaa;}
无意间想起以前志哥在群里说过，用CSS3加几个div，来写个太极。当时把代码也传入群共享，只是自己懒，没有理睬。趁着今天手还没停下来，就想想这个太极怎么写吧！
首先找个太极的图
然后是分析。最外面的大元，如果是一个div变成圆，左边和右边的白色、黑色，就不知道怎么填充了，干脆变成两个div半圆，左右结构。然后类似蝌蚪的头部，可以用圆来填充，最后两个小圆直接div，一共六个div。后面四个div都可以用定位来确定他们的位置。
.d1_l{position:relative;float:left;width:249px;height:500px;border:1px solid #000;border-right:0 none;-moz-border-radius:250px 0 0 250px;-webkit-border-radius:250px 0 0 250px;}
.d1_r{float:left;width:250px;height:502px;-moz-border-radius:0 250px 250px 0;-webkit-border-radius:0 250px 250px 0;background-color:#000;}
.d2_t{position:absolute;top:0;left:125px;width:250px;height:250px;-moz-border-radius:125px;-webkit-border-radius:125px;background-color:#000;}
.d2_b{position:absolute;bottom:0;left:125px;width:250px;height:250px;-moz-border-radius:125px;-webkit-border-radius:125px;background-color:#fff;}
.d3_t{position:absolute;top:100px;left:100px;width:50px;height:50px;-moz-border-radius:25px;-webkit-border-radius:25px;background-color:#fff;}
.d3_b{position:absolute;top:100px;left:100px;width:50px;height:50px;-moz-border-radius:25px;-webkit-border-radius:25px;background-color:#000;}
CSS3太极DEMO（只兼容chrome和FF，其他浏览器就不用点了）
相信还有少于6个div就可以搞定这个效果的方法，希望知道的朋友分享一下。