今天給大家分享一下如何用CSS來制作太極圖。太極圖經典的黑白兩色配合非常簡潔美觀，與此同時，它也簡單明了地表達了陰陽相互依存的哲學思想。讓我們一起來實現它！
首先，我們需要一個容器來容納整個太極圖。我們可以使用HTML的div標簽，并設置其class為"taiji-container"。代碼如下：
<div class="taiji-container"></div>接下來，我們需要在容器中添加兩個圓形，分別代表陰和陽。我們可以使用另一種HTML標簽——span標簽。同時，我們還需要給它們設置class，分別為"yin"和"yang"。代碼如下：
<div class="taiji-container"> <span class="yin"></span> <span class="yang"></span> </div>接下來，我們就可以開始設置它們的樣式了。首先，我們要讓兩個圓形分別位于容器的左右兩邊。我們可以使用CSS的position和left屬性來實現。代碼如下：
.yin {
background: black;
border-radius: 50%;
position: absolute;
left: 0;
width: 50%;
height: 100%;
}
.yang {
background: white;
border-radius: 50%;
position: absolute;
right: 0;
width: 50%;
height: 100%;
}現在，我們已經成功地讓陰陽兩個圓形分別位于容器的左右兩邊。接下來，我們需要為它們添加一個圓點，以及將整個太極圖分成兩個半區，一個黑色的半區表示陰，一個白色的半區表示陽。我們可以使用CSS的偽元素:before和:after來實現。代碼如下：.yin:before {
content: "";
background: white;
border-radius: 50%;
position: absolute;
left: 50%;
top: 0;
width: 25%;
height: 25%;
}
.yang:before {
content: "";
background: black;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: 0;
width: 25%;
height: 25%;
}
.yin:after {
content: "";
background: black;
box-shadow: 0 -50% black, 0 50% black, 0 0 0 10px white;
border-radius: 50%;
position: absolute;
left: 0%;
top: 0%;
width: 50%;
height: 100%;
}
.yang:after {
content: "";
background: white;
box-shadow: 0 -50% white, 0 50% white, 0 0 0 10px black;
border-radius: 50%;
position: absolute;
right: 0%;
top: 0%;
width: 50%;
height: 100%;
}現在，我們已經成功地完成了整個太極圖的制作！最后，別忘了在HTML文件中導入CSS文件：<head> <link rel="stylesheet" href="style.css"> </head>好啦，以上就是用CSS來制作太極圖的步驟了！希望大家能夠成功地完成它。