太極圖案是中華文化中的重要符號,其寓意深刻,其形態也非常美妙。我們可以用CSS來畫一個太極圖案,下面請看代碼實現:
html,body { height: 100%; margin: 0; padding: 0; } .tai-ji { position: relative; width: 200px; height: 200px; margin: auto; border-radius: 50%; overflow: hidden; background-color: #000; } .tai-ji::before,.tai-ji::after { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; background-color: #fff; } .tai-ji::before { top: 0; left: 50%; transform: translate(-50%); } .tai-ji::after { bottom: 0; left: 50%; transform: translate(-50%); }
在這段CSS代碼中,我們通過設置元素的圓角、大小、顏色等屬性,來實現了一個黑白相間的太極圖案。其中,使用了偽元素::before和::after來實現了太極圖案的兩個半部分。通過使用位置和變形屬性,我們使得偽元素能夠剛好填滿整個圓形的一半。最終,我們得到了一個非常簡單的太極圖案。