太極圖是一種傳統的中國文化元素,它在現代設計中也有著廣泛的應用。想要用代碼實現太極圖,可以使用 CSS 來進行樣式處理。下面是一個使用 CSS 實現太極圖的代碼示例:
.taiji { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(#000 50%, #fff 50%); } .taiji::before, .taiji::after { content: ""; display: block; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: #000; } .taiji::before { top: 0; left: 50%; transform: translateX(-50%); background: #fff; } .taiji::after { bottom: 0; left: 50%; transform: translateX(-50%) rotate(180deg); background: #fff; }以上代碼中,首先定義了一個名為 ".taiji" 的 CSS 類,設置其寬高為 200 像素,邊框半徑為 50%。然后使用徑向漸變為其背景設置黑白兩色的半圓,實現太極圖的黑白陰陽之分。 接著,使用偽元素 "::before" 和 "::after",為太極圖添加黑色和白色的兩個半圓。通過設置它們的寬高、圓角和位置以及旋轉等樣式,實現最終的太極圖樣式。 可以將這段代碼加入 HTML 文件,并將所需的元素添加相應的 CSS 類,即可實現一個漂亮的太極圖效果。