css background 一半_CSS---阴阳图
简介
今天教大家用CSS属性做一个简单的阴阳图,效果如下
只需用简单的CSS样式就可以完成这个阴阳图,这个阴阳图就仅仅是一个div
起步
第一步我们先做一个简单的椭圆,在HTML里添加一个div作为阴阳图的容器。
<div id="yin-yang"></div>
然后用 border-radius 画一个椭圆,这里用 height 大小为 width 两倍就可以了,
#yin-yang {width: 96px;height: 48px;border: 1px solid #41B883;border-radius: 50%;
}
效果如下
变大半圆
我们发现这个椭圆和我们想象的圆不一样呀,这里只要将下面的border宽度变大到和height一半就可以啦
#yin-yang {width: 96px;height: 48px;border: 1px solid #41B883;border-bottom-width: 48px;border-radius: 50%;
}
效果如下
是不是有点感觉了呢?下面继续画左右两边的小圆
画小圆
这里先说一下伪元素的概念,就像伪类一样, 伪元素添加到选择器,但不是描述特殊状态,它们允许您为元素的某些部分设置样式。这里用到的伪元素是 ::before
和 ::after
,相当于在div里面添加前面和后面两个元素。
这里要注意:在伪元素要添加content,否则设置宽高都没用的;还有就是要设置position属性,否则还伪元素还是不会显示
#yin-yang {position: relative;width: 96px;height: 48px;border: 1px solid #41B883;border-bottom-width: 48px;border-radius: 50%;
}#yin-yang::before {content: '';position: absolute;width: 12px;height: 12px;background: red;
}
这样我们就将伪元素显示出来了,现在对这个伪元素加些别的样式,让他的位置和颜色和阴阳图相符合
效果如下
美化小圆
- 首先确定好位置,这里要注意,不要直接将left设置为半径的四分之一,因为还要考虑到border的所占的长度
- 然后就添加border颜色为大圆的下半部分的颜色
- 最后将这个伪元素用
border-radius: 50%
变成小圆
#yin-yang {position: relative;width: 96px;height: 48px;border: 1px solid #41B883;border-bottom-width: 48px;border-radius: 50%;
}#yin-yang::before {content: '';position: absolute;top: 50%;left: 0;width: 12px;height: 12px;background: white;border: 18px solid #41B883;border-radius: 50%;
}
效果如下
和 before 伪元素一样的思路,设置一个 after 伪元素,将上面的属性取一下反,就有右边的小半圆了,所以总的CSS样式如下
#yin-yang {position: relative;width: 96px;height: 48px;border: 1px solid #41B883;border-bottom-width: 48px;border-radius: 50%;
}#yin-yang::before {content: '';position: absolute;top: 50%;left: 0;width: 12px;height: 12px;background: white;border: 18px solid #41B883;border-radius: 50%;
}
#yin-yang::after {content: '';position: absolute;top: 50%;right: 0;width: 12px;height: 12px;background: #41B883;border: 18px solid white;border-radius: 50%;
}
最终的效果如下
css background 一半_CSS---阴阳图相关推荐
- css background 一半_CSS小技巧
点击上方蓝字 关注我们 左右布局 将内部的子元素加浮动,父元素清除浮动即可. 代码: DOCTYPE html><html><head><title>tes ...
- 用css实现一个太极阴阳图,使用多个div块实现
用css实现一个太极阴阳图,使用多个div块实现 下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- css 设置背景图一半_CSS背景图设置
一.背景图设置 使用背景图片,设置为全屏 方式1:全部使用background设置 body{ background-image: url(bg.jpg); background-size: 100% ...
- 【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物 今天,我们来聊聊如何用 CSS 实现 太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个 阴阳图,谷歌搜索关键词:css t ...
- CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框 足够大 3. 需要的三角形的部分, border-top-color 设置为 ...
- html坐标轴背景色,CSS 背景(css background)
CSS 背景-CSS background 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式 ...
- 全屏css,CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
最新文章
- 【C/C++】链表的理解与使用
- 软件架构设计 温昱著 - 读书笔记
- NSAssert和NSParameterAssert
- ST-LINK USB communication error解决方法
- 分析Linux文件rwx属性的含义
- leetcode题解102-二叉树的层序遍历
- ios中navigationItem的titleView如何居中
- RxJava学习(四利用RxJava打造自己的RxBus)
- ArcGIS for Android 中实现要素绘制时固定MapView
- Python+OpenCV:形态学变换
- WSL配置C/D盘大小写敏感
- python对数据进行统计分析_数据分析员用python做数据分析是怎么回事,需要用到python中的那些内容,具体是怎么操作的?...
- opencv-python的人脸识别系统
- 数电-汽车尾灯控制电路设计
- 028_adblock
- 详细介绍MATLAB导入文本文件、excel等数据文件
- 如何在win10上连接苹果无线键盘
- CANopen基本原理及其应用(二)——对象字典和通讯机制
- Android中的多线程编程与异步处理
- Java implements关键字
热门文章
- 在线段裁剪算法中是否能对区域编码算法进行优化实现模式的唯一判别呢
- [查找问题] 例5.1 找x
- ad20导出bom没有Value属性
- Python模拟智能开关设备MQTT接入阿里云物联网平台 - PyCharm paho.mqtt
- 原来理解 AOP 可以这么简单
- 运行Eclipse出现:a java runtime environment(JRE) or java development kit(JDK) must be....
- 使用反射复制一个JavaBean的对象
- 【loj6029】「雅礼集训 2017 Day1」市场 线段树+均摊分析
- 浅谈localStorage、sessionStorage 与cookie
- codeforces 776C Molly's Chemicals(连续子序列和为k的次方的个数)