Taiji diagram may be understood as a semicircular half black and half white, are placed above the two circular, a black border white core, black core with a white border.
1, to realize black and white half round.
.box{ width:200px;height:200px; border-radius:50%; background:linear-gradient(90deg,black 50%,white 50%); margin:50px auto;position:relative; }
2, with: before pseudo-class garden implement a black border white core.
.box:before{ content:" "; position:absolute; width:0px;height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px; }
3, with: after pseudo class implements a round core black white border.
.box:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px; }
Tai Chi map rotation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>太极图</title> <style> *{ margin:0;padding:0; } body{ background: #eee } .box{ width:200px;height:200px; border-radius:50%; background: linear-gradient(90deg,black 50%,white 50%); margin:50px auto; position:relative; animation: tj 3s infinite linear ;} .box:before{ content:" "; position:absolute; width:0px; height:0px; padding:25px; border:25px solid black; border-radius: 50%; background:white; left:50px; } .box:after{ content:" "; width:0px;height:0px; padding:25px; border:25px solid white; border-radius: 50%; background:black; position: absolute; left:50px;top:100px; } @keyframes tj{ from {transform:rotate(0deg);} to{transform:rotate(360deg);} } </style> </head> <body> <div class="box"></div> </body> </html>