乾坤八卦图衍生自中国古代的《河图》与《洛书》，伏羲根据燧人氏造设的这两幅星图所作。其形状经过抽象以后，成为对称感相当强的几何图形，无论是黑白两色还是形状，都非常地平衡和稳重。
不难发现，乾坤八卦图的形状均为圆形。而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设计师日后都能在正常的工作时间内，完成老板交付给你们的任务。
