太极的绘制主要需要用到5个圆,简易图解如下(简易绘制,凑合着看看):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.bigCircle{
width: 200px;
height: 200px;
border: 1px black solid;
border-radius: 100px;
position: relative;
}
.leftCircle{
width: 100px;
height: 200px;
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
background-color: black;
float: left;
}
.rightCircle{
width: 100px;
height: 200px;
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
background-color: white;
float: left;
}
.topCircle{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50px;
top:0px;
left: 50px;
background-color: white;
}
.topSmallCircle{
width: 20px;
height: 20px;
border-radius: 10px;
margin: 40px;
background-color: black;
}
.bottomCircle{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50px;
bottom:0px;
left: 50px;
background-color: black;
}
.bottomSmallCircle{
width: 20px;
height: 20px;
border-radius: 10px;
margin: 40px;
background-color: white;
}
</style>
</head>
<body>
<div class="bigCircle">
<div class="leftCircle"></div>
<div class="rightCircle"></div>
<div class="topCircle">
<div class="topSmallCircle"></div>
</div>
<div class="bottomCircle">
<div class="bottomSmallCircle"></div>
</div>
</div>
</body>
</html>
效果图: