用css实现一个太极阴阳图，使用多个div块实现

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>onediv</title><link rel="stylesheet" href="taiji.css"></head>
<body><div class="taiji"><div class="black"><div class="littleWhite"></div></div><div class="white"><div class="littleBlack"></div></div></div>
</body>
</html>

下面是css渲染

.taiji{width: 200px;height: 100px;border: 1px solid black;border-radius: 50%;/* 该属性允许设置元素的外边框圆角*/border-bottom-width: 100px; /* 指定下边框的宽度为100px*/position: absolute;
}
.black{width: 100px;border-top:50px solid black;border-bottom: 50px solid black;border-radius: 50%;position: absolute;top: 50px;
}
.littleWhite{width: 30px;border-top: 15px solid white;border-bottom: 15px solid white;background-color: white;border-radius: 50%;position: absolute;top: -15px;left: 30px;
}
.white{width: 100px;border-top: 50px solid white;border-bottom: 50px solid white;border-radius: 50%;position: absolute;top: 50px;left: 100px;
}
.littleBlack{width: 30px;border-top: 15px solid black;border-bottom: 15px solid black;background-color: black;border-radius: 50%;position: absolute;top: -15px;left: 30px;
}

展示效果图：

用css实现一个太极阴阳图，使用多个div块实现相关推荐

css 横线_CSS-画一个太极阴阳图
先来看一下最终展示接下来一步步实现它第一步写一个HTML文件,内容只需要一个<div>标签,给一个类为"taiji" <!DOCTYPE html> ...
【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
[css] 用CSS实现一个轮播图
[css] 用CSS实现一个轮播图使用CSS实现的话,可以使用 animat属性和overflow:hidden 属性来做. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
Java绘制太极阴阳图
用Java语言绘制的太极阴阳图,没有精确的坐标,所以没有标准的中心对称,仅供参考. 示例代码如下: import java.awt.Font; import java.awt.Graphics; im ...
太极图php代码,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
Tweetable Mathematical Art 太极阴阳图
从Matrix67 blog里面看到了Tweetable Mathematical Art. 使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R ...
html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物今天,我们来聊聊如何用 CSS 实现太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个阴阳图,谷歌搜索关键词:css t ...

用css实现一个太极阴阳图，使用多个div块实现

用css实现一个太极阴阳图，使用多个div块实现

用css实现一个太极阴阳图，使用多个div块实现相关推荐

最新文章

热门文章