用 CSS 做太極圖是一種常見的網頁設計技巧，可以幫助設計師在網頁上創建具有藝術感和哲學意義的布局。在本文中，我們將介紹如何使用 CSS 來創建太極圖，包括選擇器和樣式。

太極圖是一個由兩個陰陽魚組成的圖形，具有反轉和旋轉的效果。它通常被視為中國傳統文化的代表，因此在網頁設計中也很受歡迎。

```css

div {

position: relative;

width: 200px;

height: 200px;

margin: 0 auto;

div:before,

div:after {

content: "";

position: absolute;

width: 100px;

height: 100px;

background-color: #000;

transform: rotate(-45deg);

transform-origin: 0 100%;

div:after {

transform: rotate(45deg);

transform-origin: 100% 100%;

上述代碼創建了一個具有反轉和旋轉效果的容器，其中內部包含一個水平翻轉的太極圖圖像。我們還可以使用 CSS 的“float”屬性來將容器放在頁面的不同位置，以創建更多的太極圖布局。

```css

position: relative;

width: 200px;

height: 200px;

content: "";

position: absolute;

width: 100px;

height: 100px;

background-color: #000;

transform: rotate(-45deg);

transform-origin: 0 100%;

transform: rotate(45deg);

transform-origin: 100% 100%;

上述代碼創建了一個具有反轉和旋轉效果的圖像，并將其旋轉了 45 度。我們還可以使用 CSS 的“filter”屬性來調整圖像的顏色和亮度，以創建更復雜的太極圖效果。

除了上述選擇器和樣式外，我們還可以使用其他的 CSS 屬性來創建太極圖。例如，可以使用 CSS 的“border”屬性來創建邊框，使用 CSS 的“box-shadow”屬性來創建陰影效果。

通過使用 CSS 選擇器和樣式，我們可以輕松地創建太極圖。不僅可以用于網頁布局，還可以用于其他具有反轉和旋轉效果的設計。