思路
-
用一個div秽澳，利用css的線性漸變實現(xiàn)上下分割的黑白
.taiji{
border:1px solid black;
width:400px;
height:400px;
border-radius:50%;
background: linear-gradient(to bottom, #ffffff 50%,#000000 50%);
}
2.利用before和after偽類上煤，給太極加上兩個半圓
.taiji::before{
content:'';
background:black;
position:absolute;
width:200px;
height:200px;
border-radius:50%;
left:0;
top:25%;
}
.taiji::after{
content:'';
background:white;
position:absolute;
width:200px;
height:200px;
border-radius:50%;
left:50%;
top:25%;
}
3.現(xiàn)在我們需要實現(xiàn)最中心的兩個小圓，但是如果利用div實現(xiàn)就違背了我們的初衷豌拙，所以我們可以優(yōu)化上面的css驻呐，使用邊框來讓before和after實現(xiàn)效果
.taiji::before{
content:'';
background:white;
border:75px solid black;
position:absolute;
width:50px;
height:50px;
border-radius:50%;
left:0;
top:25%;
}
.taiji::after{
content:'';
background:black;
border:75px solid white;
position:absolute;
width:50px;
height:50px;
border-radius:50%;
left:50%;
top:25%;
}
