CSS实现太极图（1个div实现）
使用一个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实现）的更多相关文章
- 利用css如何让嵌套的div层不继承父div层的透明度？
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- 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 ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- CSS+HTML实现移动端div左右滑动展示
由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...
- Div+Css画太极图源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>D ...
- CSS实现太极图（3个div实现）
使用三个div实现太极图的步骤如下: HTML部分 <div class="box"> <div class="yin"></di ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- CSS选择器、标签，div的位置。
今天是休假,布置了一个作业,是利用CSS制作斯坦福大学官网.虽然是一个并不复杂的制作,却让我第一次体会到了想摔鼠标的感觉. 遇到了很多问题,却找不出自己到底是哪里出了问题,简简单单的一个logo.足足 ...
- [css]display: table-cell，用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
随机推荐
- java中的jdk配置详解：
1.配值系统变量"JAVA_HOME" 变量名JAVA_HOME: 指向:JDK(java开发工具包)的安装路径 目的:使用JDK安装目录时,可以直接通过”%JAVA_HOME%“ ...
- SSAS有几种模式？
SQL2012中两种,SQL2016好像有三种,下面的第三种好像是2016才有.
- java 实用Util汇总
1.Util介绍 Util是工具的意思,一般来说,常常用来描述和业务逻辑没有关系的数据处理. Util一般要和私有方法对比:私有方法一般来说是只是在特地场景下使用的,私有方法越多,代码结构越乱.常见的 ...
- CF917D. Stranger Trees & TopCoder13369. TreeDistance（变元矩阵树定理＋高斯消元）
题目链接 CF917D:https://codeforces.com/problemset/problem/917/D TopCoder13369:https://community.topcoder ...
- C. Edgy Trees Codeforces Round #548 (Div. 2) 【连通块】
一.题面 here 二.分析 这题刚开始没读懂题意,后来明白了,原来就是一个数连通块里点数的问题.首先在建图的时候,只考虑红色路径上的点.为什么呢,因为为了不走红色的快,那么我们可以反着想只走红色的路 ...
- USACO The Lazy Cow
题目描述 这是一个炎热的夏天,奶牛贝茜感觉到相当的疲倦而且她也特别懒惰.她要在她的领域中找到一个合适的位置吃草,让她能吃到尽可能多的美味草并且尽量只在很短的距离.奶牛贝茜居住的领域是一个 N×N 的矩 ...
- SpringMVC的 @RestController和@Controller 区别
@RestController注解,相当于@Controller+@ResponseBody两个注解的结合, 返回json数据不需要在方法前面加@ResponseBody注解了,但使用@RestCon ...
- server端获得到client端的IP地址的格式
使用telnet,ping或其他client连接server端时,server端获得的client端的ip地址取决于client端使用的时ipv4还是ipv6地址. 例: client IPv4地址: ...
- es6里class类
/** * Created by issuser on 2018/11/27. *///如果静态方法包含this关键字,这个this指的是类,而不是实例./** (1)类的实例属性 1.类的实例属性可 ...
- 数学还勉强管用，用代码还能画个canvas 仪表盘(含完整代码)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...