CSS中有一個十分強大的屬性，它可以幫助我們畫出太極圖，這個屬性就是border-radius。

/*先定義一個div*/
div{
width:300px;
height:300px;
background-color:#000;
border-radius:50%;
}

border-radius表示邊框半徑，它是用百分比表示的，如果我們將它設置為50%，那么這個div就會變成一個圓形。同時，我們也可以設置兩個半徑，來實現圓形的分割，從而畫出太極圖。

/*再加上兩個偽元素*/
div:before{
content:'';
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
div:after{
content:'';
width: 150px;
height: 150px;
background-color: #000;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

偽元素:before和:after是在div里面的兩個空元素，我們可以在這里設置一個白色的半圓和一個黑色的半圓，同時將它們考慮中心對齊，就能完成一個完整的太極圖了！