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写出来的东西代码 ...
随机推荐
- django 的 安全机制
xss 保护: xss攻击允许用户注入客户端脚本到其他用户的服务器上.通常通过存储恶意脚本到数据库,其他用户通过数据库获取恶意脚本,并在浏览器上呈现:或是使用户点击会引起攻击者javascirpt脚本 ...
- 多并发编程基础 之线程程 Thried
原贴 https://www.cnblogs.com/gbq-dog/p/10365669.html 今日要整理的内容有 1. 操作系统中线程理论 2.python中的GIL锁 3.线程在python ...
- iOS -- UILabel的常见使用
UILabel是iOS开发经常用到的一个控件,主要用于显示文字.下面记录一些常用的UIlabel的使用. 先定义:UILabel *label = [[UILabel alloc]initWithFr ...
- c/c++ int,float,short 大小端转换函数
unsigned int(uint32_t)大小端转换函数 unsigned int BLEndianUint32(unsigned int value) { return ((value & ...
- Hexo博客系列(一)-Windows系统配置Hexo v3.x个人博客环境
[原文链接]:https://www.tecchen.xyz/blog-hexo-env-01.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...
- 使用二叉搜索树实现一个简单的Map
之前看了刘新宇大大的<算法新解>有了点收获,闲来无事,便写了一个二叉搜索树实现的Map类. java的Map接口有很多不想要的方法,自己定义了一个 public interface IMa ...
- np.array()和np.mat()区别
1. 生成数组所需格式不同 mat可以从字符串或列表中生成:array只能从列表中生成 2. 生成的数组计算方式不同 array生成数组,用np.dot()表示矩阵乘积,(*)号或np.multipl ...
- C# 聊一聊屏保的设置
初步认识屏保 进入屏保设置 强行开头,大家都知道我们只需要在搜索框打入“屏保”,就能进入屏保的设置选项.然而箭头指向的位置到底是在Windows的哪个地方呢?这就是写这篇博客的原因. 进入一个屏幕保护 ...
- GeneXus学习笔记——创建一个知识库 哈哈哈哈！
终于想到写什么东西了(绝对不是因为懒 好吧 信我) 那么进入正题 我们写项目的时候 遇到一些问题啥的 总会听到大佬说:“这有什么难的 说到底不就是简单的增删改查么" 然后我们就会露出 Σ ...
- JS实现值复制
在JS中对象一般都是传地址,后续修改也会影响原始数据.例如这样. var a={ b:"b" }; var c=a; c.b="c"; console.log( ...