<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{
width: 600px;
height: 600px;
border-radius: 600px;
background: black;
border: 1px black solid;
}
.a2{
width: 598px;
height: 299px;
border-radius: 598px 598px 0px 0px;
background: white;
border: 1px white solid;
}
.a3{
width: 298px;
height: 298px;
border-radius: 100%;
background: white;
margin: -150px 0px;
border: 1px white solid;
}
.a4{
width: 300px;
height: 300px;
border-radius: 100%;
background: black;
border: 1px black solid;
margin: 150px 298px;
}
.a5{
width: 60px;
height: 60px;
border-radius: 100%;
background: black;
margin: 120px auto;
}
.a6{
width: 60px;
height: 60px;
border-radius: 100%;
background: white;
margin: 120px auto;
}
</style>
</head>
<body>
<div class="a1">
<div class="a2">
<div class="a4">
<div class="a6"></div>
</div>
</div>
<div class="a3">
<div class="a5"></div>
</div>
</div>
</body>
</html>
效果图：
太极图：
一个大圆为黑色里面加上一个白色的半圆，在黑色大圆里面设置一个白色的小圆，在白色的小圆里设置一个黑色的小圆，
右边同上面的一样
