css3 画太极图——用三个div实现

（1）首先，绘制背景：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>css3画太极图</title><style>.taiji{width:500px;height:500px;        margin:100px auto;background-color:black;}</style></head><body><div class="taiji"><div class="black"></div><div class="white"></div></div></body>
</html>

（2）接下来，画一个圆：

.taiji{width:500px;height:500px;     margin:100px auto;      position:relative;background-color:black;border-radius:500px;
}

（3）将圆画成左右两个不同颜色的半圆：

 .taiji:before,.taiji:after {width:250px;height:500px;position:absolute;top:0;display:block;content:"";}.taiji:before {left:0;border-radius:250px 0 0 250px;background-color:#000;}.taiji:after {right:0;border-radius:0 250px 250px 0;background-color:#fff;}

border-radius：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

（4）画上面的圆：

 .left,.right{width:250px;height:250px;position:absolute;z-index:2;border-radius:375px;      }.left{top:0;left:125px;background-color:#000;}

（5）同理，画下面的圆：

 .right{bottom:0;right:125px;background-color:#fff;}

（6）在下面小圆里面画小黑色圆：

 .right:after{bottom:75px;right:75px;background-color:#000;}

（7）同理，在上面的圆里面画小白色圆：

 .left:after{top:75px;left:75px;background-color:#fff;}

完整代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>css3画太极图</title><style>*{padding:0;margin:0;}.taiji{width:500px;height:500px;  position:relative;margin:100px auto;background-color:black;border-radius:500px;}.taiji:before,.taiji:after {width:250px;height:500px;position:absolute;top:0;display:block;content:"";}.taiji:before {left:0;border-radius:250px 0 0 250px;background-color:#000;}.taiji:after {right:0;border-radius:0 250px 250px 0;background-color:#fff;}.left,.right{width:250px;height:250px;position:absolute;z-index:2;border-radius:375px;       }.left{top:0;left:125px;background-color:#000;}.right{bottom:0;right:125px;background-color:#fff;}.left:after,.right:after{width:100px;height:100px;z-index:3;position:absolute;display:block;content:"";border-radius:100px;}.left:after{top:75px;left:75px;background-color:#fff;}.right:after{bottom:75px;right:75px;background-color:#000;}</style></head><body><div class="taiji"><div class="left"></div><div class="right"></div></div></body>
</html>

css3 画太极图——用三个div实现相关推荐

css3 画太极图——用一个div实现
(1)绘制两个半圆: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
用php的for循环画椭圆,如何快速简单的使用css3画出各种各样的椭圆
以前前端开发的时候,对于那些特殊的图形,前端开发人员大部分的时候会使用图片的剪裁来插入特殊的图形,而现在随着css3的发展,很多形状可以通过css3画出,本篇文章给大家带来的内容是关于如何快速简单的使 ...
CSS3 画的哆啦A梦
建议用Chrome看 DEMO: http://koyoz.com/demo/css/doraemon_css3.html <!DOCTYPE html PUBLIC "-//W3C/ ...
计算机太极图怎么设计,怎么用cad2010画太极图
CAD即计算机辅助设计(CAD-Computer Aided Design) 利用计算机及其图形设备帮助设计人员进行设计工作,怎么实现用CAD画太极图呢?下面学习啦小编跟你们分享我的方法用CAD20 ...
用css3画一个哆啦A梦
今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识.用css作画最重要的就是要做好定位,其次是通过边框属性来切割 ...
画太极图辅助程序_Python精灵模块应用实例
"""画太极图教学辅助程序.本程序采用Screen(3)把窗口整体分为两个大区.上面的是root.topframe,下面的是root.bottomframe.在root. ...

css3 画太极图——用三个div实现

css3 画太极图——用三个div实现相关推荐

最新文章

热门文章