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

（1）绘制两个半圆：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>css 绘制太极图</title><style class="cp-pen-styles">*{padding:0;margin:0;}.outer{margin:100px auto;width:0;height:500px;border-radius: 500px;position:relative;border-left:250px solid black;border-right:250px solid white;box-shadow:0 0 30px #D3D3D3;}</style>
</head>
<body>
<div class="outer">
</div>
</body>
</html>

（2）绘制上面的圆：

 .outer:after{width:250px;height:250px;position:absolute;left:-125px;display:block;content:"";z-index:1;background-color:white;border-radius:50%;}

（3）绘制下面的圆：

 .outer:after{width:250px;height:250px;position:absolute;left:-125px;display:block;content:"";z-index:1;background-color:white;border-radius:50%;box-shadow:0 250px 0 black;}

（4）绘制上面的小圆：

 .outer:before {content:"";position:absolute;display: block;width:100px;height:100px;top:75px;left:-50px;z-index:2;background-color:black;border-radius:50%;}

（5）绘制下面的小圆：

 .outer:before {content:"";position:absolute;display: block;width:100px;height:100px;top:75px;left:-50px;z-index:2;background-color:black;border-radius:50%;box-shadow:0 250px 0 white;}

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>css 绘制太极图</title><style class="cp-pen-styles">*{padding:0;margin:0;}.outer{margin:100px auto;width:0;height:500px;border-radius: 500px;position:relative;border-left:250px solid black;border-right:250px solid white;box-shadow:0 0 30px #D3D3D3;}.outer:after{width:250px;height:250px;position:absolute;left:-125px;display:block;content:"";z-index:1;background-color:white;border-radius:50%;box-shadow:0 250px 0 black;}.outer:before {content:"";position:absolute;display: block;width:100px;height:100px;top:75px;left:-50px;z-index:2;background-color:black;border-radius:50%;box-shadow:0 250px 0 white;}</style>
</head>
<body>
<div class="outer">
</div>
</body>
</html>

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

css3 画太极图——用三个div实现
(1)首先,绘制背景: <!doctype html> <html lang="en"><head><meta charset=" ...
动态太极图html代码,用一个div加一段css代码画一个太极图
[摘要] 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图. 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图.看了下代码,发现其利 ...
[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" ...
html5 骰子滚动,CSS3画一个滚动的骰子
今天利用CSS3来画一个自动滚动的骰子. 思路:骰子的六个面分别用六个ul标签,每个面的点数就是li标签,点数的排列采用伸缩布局,然后采用定位和transform属性将六个面翻转折叠成立方体. 1.H ...
用css3画一个哆啦A梦
今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识.用css作画最重要的就是要做好定位,其次是通过边框属性来切割 ...
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
[css] 如何使用css3实现一个div设置多张背景图片？
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
html 特效隐藏div,如何实现用css3显示隐藏一个div特效
这篇文章主要介绍了关于如何实现用css3显示隐藏一个div特效,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下显示隐藏一个p特效的方法有很多,下为大家介绍下使用纯css3是如何实现的, ...

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

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

最新文章

热门文章