web太极八卦图纯css

最新推荐文章于 2021-06-22 15:08:48 发布

00_JackLu

最新推荐文章于 2021-06-22 15:08:48 发布

阅读量481

点赞数

分类专栏： web代码笔记文章标签： web太极八卦图纯css

本文链接：https://blog.csdn.net/qq_43399648/article/details/90690791

版权

web代码笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我咋感觉画的不太像啊，哈哈哈哈哈哈哈哈哈
凑合看吧，略略略

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.aa{
				height: 500px;
				width: 500px;
				border: 1px solid black;
				border-radius: 250px;
				overflow: hidden;		
			}
			.bb{
				width: 500px;
				height: 250px;
				background: black;
				position: relative;
			}
			.cc{
				background: white;
				width: 250px;
				height: 250px;
				border-radius: 125px;
				position: absolute;
				top: 125px;
			}
			.dd{
				background: black;
				width: 250px;
				height: 250px;
				border-radius: 125px;
				position: relative;
				left: 250px;
				top: -125px;
			}
			.ee{
				background: black;
				border-radius: 50px;
				width: 100px;
				height: 100px;
				border-radius: 50px;
				position: relative;
				left: 75px;
				top: 210px;
			}
			.ff{
				width: 100px;
				height: 100px;
				border-radius: 50px;
				background: white;
				position: relative;
				left: 72.5px;
				top:72.5px;
			}
		</style>
	</head>
	<body>
		<div class="aa">
			<div class="bb">
			<div class="cc">	
			</div>
			<div class="ee">
				
			</div>
			</div>
			<div class="dd">
			<div class="ff">
				
			</div>	
			</div>
			
		</div>
	</body>
</html>

00_JackLu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web太极八卦图纯css

我咋感觉画的不太像啊，哈哈哈哈哈哈哈哈哈凑合看吧，略略略<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .aa{ height: 500px;...
复制链接

扫一扫

专栏目录