只用一个div制作太极图

今天来说说如何用一个div制作太极图，之前做太极图用了很多标签，然后每个标签定位啊，设置圆角啊，代码量肯定不会少，但是今天，我们用一个div就来制作：
　　先看html代码截图，真的只有一个标签哦。
　　再看效果：

　　这其中关键就是给这个div设置一边的边框（我设置的是底边框），这一边的边框大小是div容器高度的一半，然后给div设置圆角属性后成了这样（写了初始样式代码）：
　　　　　　　　
　　然后利用伪元素after和before给div让它上面有两个圆的效果就可以了，非常简单！
　　下面附上css代码截图：
　　　　　　　　
　　两个伪元素的代码几乎一样，只不过一个边框是黑色背景白色，另一个边框白色背景黑色，通过定位和容易就能达到效果图，对了宽高要设置成div的一半。都是很基础的代码，真的是非常简单了。
　　本人只是一个前端的初学者，懂得不多，欢迎指出问题。