使用一个div实现太极图的步骤如下：

HTML部分：

<body>

    <div class="box-taiji">

    </div>

</body>

第一步，结合border实现左黑右白的正方形，加上圆角、阴影。代码如下;

.box-taiji{

            width:;

            height:300px;

            position:relative;

            margin: 50px auto;

            border-left:150px solid #000;

            border-right:150px solid #fff;

            box-shadow: 0 0 30px rgba(0,0,0,0.5);

            border-radius: 300px;

        }

效果如下：

第二步，通过伪类，实现一个一个白色的圆形，定位好位置。同时，利用box-shadow:0 200px 0 #000;实现同样大小的圆，放好。

.box-taiji:after{

            width:150px;

            height:150px;

            position:absolute;

            content: '';

            display: block;

            top:;

            left:-75px;

            z-index:;

            background-color: #fff;

            border-radius:50%;

            box-shadow:0 150px 0 #000;

        }

先后实现的效果如下：

第三步，同样第二步一样的原理，再实现黑白两个圆，放到相关的位置。

.box-taiji:before {

            content:'';

            position:absolute;

            display: block;

            width:75px;

            height:75px;

            top:38px;

            left:-38px;

            z-index:;

            background-color:#000;

            border-radius:50%;

            box-shadow:0 150px 0 #fff;

        }

最终效果如下：

和用上一篇3个div实现太极图一样，我们也可以通过CSS3动画实现旋转太极图。

CSS实现太极图（1个div实现）的更多相关文章

  1. 利用css如何让嵌套的div层不继承父div层的透明度？

    http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...

  2. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

  3. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  4. CSS+HTML实现移动端div左右滑动展示

    由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...

  5. Div+Css画太极图源代码

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...

  6. CSS实现太极图（3个div实现）

    使用三个div实现太极图的步骤如下: HTML部分 <div class="box"> <div class="yin"></di ...

  7. 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

  8. CSS选择器、标签，div的位置。

    今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...

  9. [css]display: table-cell，用div做分列布局

    table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...

随机推荐

  1. 45.oracle表类型、数据拆分、表分区

    不要做一些没有意义的事情,就比如说你要离职并不打算吃回头草,离职理由中完全没有必要说明“领导的水平太渣,人品太差”此类的原因,而是“个人原因”,当然实在不批准辞职另说. oracle表类型 表的类型分 ...

  2. QuantLib 金融计算——基本组件之 InterestRate 类

    目录 QuantLib 金融计算--基本组件之 InterestRate 类 InterestRate 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. Qua ...

  3. 实验一 c++简单程序设计

    一.实验内容 1.ex 2_28 (1) 用if...else判断 #include<iostream> using namespace std; int main() { char i; ...

  4. 关于Vue中main.js，App.vue，index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  5. C#高效新增数据到数据库（十万级别测试）

    我们在对数据库进行新增数据时,怎么能把速度提到最快,时间缩到最短呢?下面针对三种方法进行比较 新增 逐条新增数据模式 Stopwatch s2 = new Stopwatch(); s2.Start( ...

  6. js数字动画

    项目中需要的数字动画效果,网上找不到需要的效果,所以自己写了一个. 不多说,直接上干货:

  7. 《Effective C++（第三版）》 的55条建议

    1. 让自己习惯C++(Accustoming yourself to C++) 条款01: 视C++ 为一个语言联邦(View C++ as a federation of languages) 条 ...

  8. Elastic-Job源码分析之AbstractElasticJobExecutor分析

    还记得我们在JobScheduler中,在创建任务详情时,会调用一个建造器JobBuilder来创建一个Job,类型是LiteJob. LiteJob.java /** * Lite调度作业. * * ...

  9. Spring Boot遇到的某些问题

    Spring Boot遇到的某些问题 1.关于templates的html包格式问题: <properties> <project.build.sourceEncoding>U ...

  10. 13 Timer和TimerTask

    下面内容转载自:http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了ru ...