做太极图的方法之一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.red{
width: 500px;
height: 500px;
background: black;
border-radius: 100%;
border: 1px solid black;
}
.red1{
width: 498px;
height: 249px;
background: white;
border-radius: 250px 250px 0px 0px;
border: 1px solid white;
}
.red2,.red3{
width: 249px;
height: 249px;
border-radius: 100%;
}
.red2{
background: white;
border: 1px solid white;
margin-top:125px ;
}
.red3{
background: black;
border: 1px solid black;
margin-left: 250px;
margin-top: -125px;
}
.W,.W1{
width: 50px;
height: 50px;
border-radius: 100%;
margin: auto;
margin-top:100px ;
}
.W{
background: black;
}
.W1{
background: white;
}
</style>
</head>
<body>
<div class="red">
<div class="red1">
<div class="red2">
<div class="W"></div>
</div>
</div>
<div class="red3">
<div class="W1"></div>
</div>
</div>
</body>
</html>
