太極圖是中國傳統文化中的一種圖像,代表著陰陽相互依存、相互轉化的哲學思想和生命之道。
在CSS中,可以使用偽類和偽元素來繪制太極圖。
.taiji { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(to bottom, #fff 50%, #000 50%); position: relative; } .taiji:before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .taiji:after { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: #000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
上面的代碼中,我們首先定義了一個.taiji的類,它的寬高為200px,邊框半徑為50%,用線性漸變實現了黑白兩色的分界線。
然后,我們使用:before和:after偽元素來繪制圖中的兩個小圓形。我們分別設置它們的顏色為白色和黑色,寬高為100px,位置分別放在圓形的上下兩端,同時使用transform屬性使它們水平居中。
最終,我們就成功地使用CSS繪制了一幅太極圖。
上一篇jquery 3 文檔
下一篇如何用css畫一個半圓弧