小白刚学前段10天，html基础学完了，css基础已经学到边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极图</title>
<style type="text/css">
body{
background: lightsteelblue;
}
.big{
width: 800px;
height: 800px;
background: black;
border-radius: 400px;
}
.bigwhite{
width: 800px;
height: 400px;
background: white;
border-radius: 400px 400px 0px 0px;
}
.white1{
width: 400px;
height: 200px;
background: white;
border-radius: 0px 0px 200px 200px;
}
.black1{
width: 400px;
height: 200px;
background: black;
border-radius: 200px 200px 0px 0px;
margin-top: -400px;
margin-left: 400px;
}
.black2{
width:110px;
height: 110px;
background: black;
border-radius: 55px;
margin-left: 150px;
margin-top: -110px;
}
.white2{
width:110px;
height: 110px;
background: white;
border-radius: 55px;
margin-left: 550px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="big">
<div class="bigwhite"></div>
<div class="white1"></div>
<div class="black1"></div>
<div class="white2"></div>
<div class="black2"></div>
</div>
</body>
</html>
中心的两个小圆可能不太精准，后期会改正，Thanks♪(･ω･)ﾉ