CSS3画一个阴阳八卦图


Posted in HTML / CSS onMarch 09, 2021

CSS3画一个阴阳八卦图

<!-- HTML -->
<div id="yin_yang"></div>
#yin_yang {
	width: 96px;
	height: 48px;
	background: #eee;
	border-color: red;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
}

#yin_yang:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background: #eee;
	border: 18px solid red;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#yin_yang:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: red;
	border: 18px solid #eee;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

 

HTML / CSS 相关文章推荐
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
详解CSS样式中的 !important * _ 符号
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
CSS心形加载的动画源码的实现
使用CSS3实现字体颜色渐变的实现
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
You might like
生成静态页面的PHP类
2006/07/15 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
Open and Print a Word Document
2007/06/15 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python六大开源框架对比
2015/10/19 Python
Python实现基本线性数据结构
2016/08/22 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
使用python接入微信聊天机器人
2020/03/31 Python
logging level级别介绍
2020/02/21 Python
python 实现任务管理清单案例
2020/04/25 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
python 如何在测试中使用 Mock
2021/03/01 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
师德师风剖析材料
2014/09/30 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
写给医生的感谢信
2015/01/22 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
情况说明书格式及范文
2019/06/24 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python