css3 画太极图——用三个div实现

＊且听风吟

已于 2023-03-31 09:27:40 修改

阅读量564

点赞数 1

分类专栏： # CSS 文章标签： css3 css javascript

于 2019-10-16 19:45:41 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/102489681

版权

CSS 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

（1）首先，绘制背景：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>css3画太极图</title>
  <style>
	.taiji{
		width:500px;
		height:500px;		
		margin:100px auto;
		background-color:black;
	}
  </style>
 </head>
 <body>
  <div class="taiji">
	<div class="black"></div>
	<div class="white"></div>
  </div>
 </body>
</html>

在这里插入图片描述
（2）接下来，画一个圆：

.taiji{
		width:500px;
		height:500px;		
		margin:100px auto;		
		position:relative;
		background-color:black;
		border-radius:500px;
}

在这里插入图片描述
（3）将圆画成左右两个不同颜色的半圆：

	.taiji:before,.taiji:after {
		width:250px;
		height:500px;
		position:absolute;
		top:0;
		display:block;
		content:"";
	}
	.taiji:before {
		left:0;
		border-radius:250px 0 0 250px;
		background-color:#000;
	}
	.taiji:after {
		right:0;
		border-radius:0 250px 250px 0;
		background-color:#fff;
	}

border-radius：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
在这里插入图片描述
（4）画上面的圆：

	.left,.right{
		width:250px;
		height:250px;
		position:absolute;
		z-index:2;
		border-radius:375px;		
	}
	.left{
		top:0;
		left:125px;
		background-color:#000;
	}

在这里插入图片描述
（5）同理，画下面的圆：

	.right{
		bottom:0;
		right:125px;
		background-color:#fff;
	}

在这里插入图片描述
（6）在下面小圆里面画小黑色圆：

	.right:after{
		bottom:75px;
		right:75px;
		background-color:#000;
	}

在这里插入图片描述
（7）同理，在上面的圆里面画小白色圆：

	.left:after{
		top:75px;
		left:75px;
		background-color:#fff;
	}

在这里插入图片描述
完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>css3画太极图</title>
  <style>
	*{
		padding:0;
		margin:0;
    }
	.taiji{
		width:500px;
		height:500px;	
		position:relative;
		margin:100px auto;
		background-color:black;
		border-radius:500px;
	}
	.taiji:before,.taiji:after {
		width:250px;
		height:500px;
		position:absolute;
		top:0;
		display:block;
		content:"";
	}
	.taiji:before {
		left:0;
		border-radius:250px 0 0 250px;
		background-color:#000;
	}
	.taiji:after {
		right:0;
		border-radius:0 250px 250px 0;
		background-color:#fff;
	}
	.left,.right{
		width:250px;
		height:250px;
		position:absolute;
		z-index:2;
		border-radius:375px;		
	}
	.left{
		top:0;
		left:125px;
		background-color:#000;
	}
	.right{
		bottom:0;
		right:125px;
		background-color:#fff;
	}
	.left:after,.right:after{
		width:100px;
		height:100px;
		z-index:3;
		position:absolute;
		display:block;
		content:"";
		border-radius:100px;
	}
	.left:after{
		top:75px;
		left:75px;
		background-color:#fff;
	}
	.right:after{
		bottom:75px;
		right:75px;
		background-color:#000;
	}
  </style>
 </head>
 <body>
  <div class="taiji">
	<div class="left"></div>
	<div class="right"></div>
  </div>
 </body>
</html>