使用一个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. 总结day24 ---- socket ,struct 的学习

    前情提要 一:套接字  socket()  1:三次握手 1:客户端像服务端链接,   (第一次握手) 2:服务端收到请求,告诉客户端服务端收到了内容    (第二次握手1) 3:服务端像客户端连接, ...

  2. POJ 2196

    #include <iostream> using namespace std; int sum_10; int sum_12; int sum_16; int fun_10(int nu ...

  3. 【转载】MSDN-MDX#001 - 多维表达式 (MDX) 参考

    摘录于MSDN MDX 的一些重要概念 1. MDX 介绍 多维表达式 (MDX) 是用于在 Microsoft SQL Server Analysis Services (SSAS) 中处理和检索多 ...

  4. 并发编程>>并发级别（二）

    理解并发 这是我在开发者头条看到的.@编程原理林振华 有目标的提升自己会事半功倍,前行的道路并不孤独. 1.阻塞 当一个线程进入临界区(公共资源区)后,其他线程必须在临界区外等待,待进去的线程执行完成 ...

  5. CentOS7 安装 Adobe Flash 看网络视频

    登录 Adobe 网站,找到 Adobe Flash Player 下载页,进入后网页自动识别 Linux 环境,手动选择版本,选择 YUM 方式,自动下载一个 rpm 文件 定位到下载目录,通常默认 ...

  6. css的reset和常用的html标签的默认样式整理

    先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em; ...

  7. python的面向对象和类

    目录 一.基本知识点 1.面向过程编程 2.面向对象编程 3.注意 二.类的结构 1.类的理解 2.代码形式 3.类和函数的一些区别 4.类中的数据 5.类中的方法(基础) 三.类的实例化 四.类的继 ...

  8. C# 多线程系列之异步回调（委托）

    本文参考自C#基础:线程之异步回调(委托),纯属读书笔记 在解析异步回调之前,先看同步回调的执行过程,以及代码原理. 1.线程的同步执行 同步执行:在主线程执行的时候,主线程调用一个其它方法,此时主线 ...

  9. eclips中maven解决jsp报错的问题

    加入如下的pom依赖: <!-- 解决jsp报错的依赖包第一个 --> <dependency> <groupId>javax.servlet</groupI ...

  10. 【数组】Subsets

    题目: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset ...