css-绘制八卦图

xyc

      咱们继续之前说的css实现图形的效果方法，今天来说说八卦图的实现方法。
      原理：多个圆形的组合。
      效果：
      
      HTML：
      

[HTML] 纯文本查看 复制代码

<div class="div"></div>

      css样式：
      

[CSS] 纯文本查看 复制代码

.div{
 width: 96px;
 height: 48px;
 margin: 20px 20px;
 float: left;
 background-color: #ffffff;
 border-color: #000000;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
.div:before {
 width: 12px;
 height: 12px;
 top: 50%;
 left: 0;
 content: "";
 position: absolute;
 background-color: #ffffff;
 border: 18px solid #000000;
 border-radius: 100%;
}
.div:after {
 width: 12px;
 height: 12px;
 top: 50%;
 left: 50%;
 background-color: #000000;
 border: 18px solid #ffffff;
 border-radius:100%;
 content: "";
 position: absolute;
}

     以上就是八卦图的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

范范

支持楼主