(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>