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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 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
各种战术和打法的原创者
2020/03/04 星际争霸
PHP Document 代码注释规范
2009/04/13 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php中require和require_once的区别说明
2014/02/27 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
jQuery 表格插件整理
2010/04/27 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python字典操作简明总结
2015/04/13 Python
python3.5仿微软计算器程序
2020/03/30 Python
python机器学习之神经网络(三)
2017/12/20 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python configparser模块操作代码实例
2020/06/08 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
廉洁使者实施方案
2014/03/29 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
导游词300字
2015/02/13 职场文书
三国演义读书笔记
2015/06/25 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
高中数学教学反思范文
2016/02/18 职场文书