html5 css3画八卦图,用纯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设计师日后都能在正常的工作时间内，完成老板交付给你们的任务。