在CSS中,可以使用polygon()
函數(shù)來繪制多邊形。polygon()
函數(shù)接受一個參數(shù),即多邊形的各個頂點坐標,這些坐標可以是***位置(如px
、em
等),也可以是相對位置(如%
)。
要繪制一個位于屏幕中央的等邊三角形,可以使用以下CSS代碼:
.triangle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
這段代碼創(chuàng)建了一個等邊三角形,其頂點位于屏幕中央,底邊長度為100px,顏色為紅色。border-left
和border-right
屬性分別設置了左右兩個透明邊框,border-bottom
屬性設置了底邊的顏色,通過調(diào)整這些屬性的值,可以改變多邊形的大小、形狀和顏色。
如果要繪制一個不規(guī)則多邊形,可以使用多個頂點坐標來定義,要繪制一個位于屏幕中央的五邊形,可以使用以下CSS代碼:
.pentagon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid blue; border-bottom: 100px solid orange; }
這段代碼創(chuàng)建了一個五邊形,其頂點位于屏幕中央,頂邊長度為100px,顏色為藍色,底邊長度為100px,顏色為橙色,通過調(diào)整這些屬性的值,可以改變多邊形的大小、形狀和顏色。