苏飞论坛

标题: css-绘制八卦图 [打印本页]

---

作者: xyc    时间: 2021-7-6 18:52
标题: css-绘制八卦图
      咱们继续之前说的css实现图形的效果方法，今天来说说八卦图的实现方法。
      原理：多个圆形的组合。
      效果：
       (, 下载次数: 15)

上传

点击文件名下载附件
      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实现其他图形的样式方法。希望大家多多关注！

---

作者: 范范    时间: 2021-7-7 15:39
支持楼主

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4