CSS3是一種強大的樣式語言,它可以用于繪制各種形狀。而令我們更為驚訝的是,CSS3還可以繪制樹狀結(jié)構(gòu)。下面是使用CSS3繪制樹狀結(jié)構(gòu)代碼的示例:
.tree{ width: 300px; height: 300px; position: relative; } .tree:before{ content:""; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-top: 50px solid green; border-right: 25px solid transparent; border-left: 25px solid transparent; } .tree ul{ padding: 0; list-style: none; position: absolute; top: 50px; left: 0; } .tree li{ position: relative; padding-left: 35px; margin-bottom: 20px; } .tree li:before{ content:""; position: absolute; top: -20px; left: -15px; border-left: 15px solid green; border-right: 15px solid green; border-bottom: 20px solid green; border-radius: 0 0 5px 5px; transform: rotate(-45deg); } .tree li:after{ content:""; position: absolute; top: -20px; left: 25px; border-left: 15px solid green; border-right: 15px solid green; border-bottom: 20px solid green; border-radius: 0 0 5px 5px; transform: rotate(45deg); } .tree li:last-child:before{ content: ""; position: absolute; left: -15px; top: -20px; border-left: 15px solid green; border-right: 15px solid green; border-bottom: 20px solid green; border-radius: 0 0 0 5px; }
這里的.tree是一個父盒子,他的偽元素:before是這個樹狀結(jié)構(gòu)的一部分,用來繪制樹的頂部。接下來,我們使用ul列表和li元素來創(chuàng)建樹形結(jié)構(gòu)。每一個li元素都使用:before和:after來繪制連接線條。
可以根據(jù)實際需求來改變樹狀結(jié)構(gòu)的樣式,比如修改border的顏色、大小等。這樣就可以繪制出符合我們需求的樹形結(jié)構(gòu)了。
上一篇css3給圖片加邊框代碼
下一篇css3繪制太極圖