太極圖是一種中國傳統的圖形,通常用于表現陰陽的哲學思想。在網頁設計中,我們也可以用CSS來實現太極圖。
.taiji { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(#000 50%, #fff 50%); position: relative; overflow: hidden; } .taiji:before { content: ""; display: block; position: absolute; top: 0; left: 50%; width: 100px; height: 100px; background: #000; border-radius: 50%; transform: translate(-50%, -50%); } .taiji:after { content: ""; display: block; position: absolute; bottom: 0; left: 50%; width: 100px; height: 100px; background: #fff; border-radius: 50%; transform: translate(-50%, 50%); }
上面的代碼是用CSS實現太極圖的方法。首先,我們給太極圖一個圓形的形狀,這可以通過設置border-radius為50%來實現。然后我們用radial-gradient來給太極圖填充黑白兩色。其中,#000代表黑色,#fff代表白色。這里我們設置了一個徑向漸變,使得最上方是黑色,最下方是白色。
接下來,我們用:before和:after兩個偽元素來實現太極圖的兩個小圓。它們的樣式類似,都是以絕對定位的方式來實現。
最后,我們就可以給一個div元素設置樣式為.taiji,來得到一個完整的太極圖。
上一篇頭像旋轉360 css3
下一篇css邊界陰影