用纯CSS3绘制乾坤八卦图

       乾坤八卦图衍生自中国古代的《河图》与《洛书》，伏羲根据燧人氏造设的这两幅星图所作。其形状经过抽象以后，成为对称感相当强的几何图形，无论是黑白两色还是形状，都非常地平衡和稳重。

　　不难发现，乾坤八卦图的形状均为圆形。而css3绘制圆的方法也很简单，设置圆角半径等于50%即可，所以绘制起来十分方便。

　　大体结构就是两个半圆，左白右黑，然后上下分别绘制一个半径等于大圆一半的圆，上黑下白，最后加上两个圆点即可。

　　总的来说，这个八卦图包括三层共6个元素，为了不导致混淆，本教程不打算使用伪元素。

　　现在我们先来构建基础的html代码:

　　所有元素都包在big-circle里面，它们之间会相对重叠，所以需要设置相对定位，让内部元素使用绝对定位时以big-circle的左上角作为参考点。

　　.big-circle{

　　position:relative;

　　width:200px;

　　height:200px;

　　}

　　接下来，我们绘制左侧的半圆，整个圆我们可以用border-radius设置为50%。半圆的话，就需要有所区分，矩形的宽高比为1:2，右侧的两个角圆角半径为0。

　　左侧半圆的边框颜色为黑色，背景为白色，

　　总的CSS代码如下:

　　.SEMi-circle-left{

　　position:absolute;

　　width:100px;

　　height:200px;

　　top:0px;

　　left:0px;

　　background:#fff;

　　border:2px solid #000;

　　-webkit-border-radius:100px 0px 0px 100px;

　　-moz-border-radius:100px 0px 0px 100px;

　　-o-border-radius:100px 0px 0px 100px;

　　border-radius:100px 0px 0px 100px;

　　}

　　border-radius的4个圆角半径用英文空格分隔，依次为左上，右上，右下，左下（从左上开始顺时针数下来）。

　　border-radius需要用不同前缀兼容不同的浏览器。

　　运行效果如下图所示:

　　类似地，右侧的样式如下。不同的部分已经用红色高亮标记出来了。

　　.semi-circle-right{

　　position:absolute;

　　width:100px;

　　height:200px;

　　top:0px;

　　left:100px;

　　background:#000;

　　border:2px solid #000;

　　-webkit-border-radius:0px 100px 100px 0px;

　　-moz-border-radius:0px 100px 100px 0px;

　　-o-border-radius:0px 100px 100px 0px;

　　border-radius:0px 100px 100px 0px;

　　}

　　运行效果如下图所示:

　　现在我们绘制上下两个圆。

　　上面的圆样式如下:

　　.small-circle-top{

　　position:absolute;

　　width:100px;

　　height:100px;

　　top:0px;

　　left:50px;

　　background:#000;

　　-webkit-border-radius:50%;

　　-moz-border-radius:50%;

　　-o-border-radius:50%;

　　border-radius:50%;

　　}

　　由于我们是绘制完整的圆，因此直接设置border-radius=50%即可，无需像前面那样需要分开设置。

　　再次运行，效果如下图所示:

　　看起来，下面的圆也没有任何问题了，只要改下位置和颜色即可。

　　.small-circle-bottom{

　　position:absolute;

　　width:100px;

　　height:100px;

　　top:100px;

　　left:50px;

　　background:#fff;

　　-webkit-border-radius:50%;

　　-moz-border-radius:50%;

　　-o-border-radius:50%;

　　border-radius:50%;

　　}

　　运行效果如下图所示:

　　好了，就差两个小圆点。方法跟绘制第2层的两个圆没有大异。

　　.small-circle-bottom{

　　position:absolute;

　　width:100px;

　　height:100px;

　　top:100px;

　　left:50px;

　　background:#fff;

　　-webkit-border-radius:50%;

　　-moz-border-radius:50%;

　　-o-border-radius:50%;

　　-webkit-border-radius:50%;

　　-moz-border-radius:50%;

　　-o-border-radius:50%;

　　border-radius:50%;

　　}

　　.circle-point-top{

　　position:absolute;

　　width:25px;

　　height:25px;

　　top:37.5px;

　　left:87.5px;

　　background:#fff;

　　-webkit-border-radius:50%;

　　-moz-border-radius:50%;

　　-o-border-radius:50%;

　　border-radius:50%;

　　}

　　再次运行，效果如下图所示:

　　细心的朋友可能会发现一个瑕疵，在八卦图的正下方，白色小圆和白色大半圆的衔接不是那么光滑，好像凸起来了一点点，这其实是大半圆那两个像素的边框所引起的，要修正这个小“bug”，我们不妨让半圆的高度减小两个像素吧，与此同时，半圆的宽度也应该减小1像素。

　　.semi-circle-left{

　　width:99px;

　　height:198px;

　　}

　　.semi-circle-right{

　　width:99px;

　　height:198px;

　　}

　　运行效果如下图所示:

　　这样，一个标准的乾坤八卦图就绘制完成了。

　　据说在古代，八卦图是除凶避灾的常用图案，又据说在现代，Web设计师最大的灾难就是无休止的加班。小编希望通过这篇八卦图教程，祝愿各位Web设计师日后都能在正常的工作时间内，完成老板交付给你们的任务。