CSS画太极图

预览图

效果图如上，预览链接点这里。

多用css画几个图就会发现，其实都是视觉欺骗的把戏。你看到的太极图的不是你以为的太极图。人有时也是。

我觉得用CSS画图，最重要的一点是结构的拆解。初看时不知如何下手就是因为不知道从何画起并和css的属性结合。在这里，你第一眼肯定知道要用上border-radius这个属性。接下来呢？我觉得下面四张演变图你就清楚了。

演变

就把代码贴上逐行分析吧，文字分享略枯燥。主要是CSS代码，HTML结构只有一个div元素。
不能设置代码这点太不友好了，贴图吧，代码你知道在哪找的。

长截图工具fast stone capture

当然在结构上也可以在div内部加子元素实现，这里用伪元素就使得在结构上简洁了些。