如何利用CSS寫一個(gè)六邊形?
網(wǎng)友解答: 利用css寫一個(gè)六邊形方法有很多,下面我來說一下我的實(shí)現(xiàn)方法,供大家參考;首先我們可以把一個(gè)六邊形,拆開來看,就是中間一個(gè)矩形加左右各一個(gè)三角形,如圖:這樣一拆解,就非常簡單
利用css寫一個(gè)六邊形方法有很多,下面我來說一下我的實(shí)現(xiàn)方法,供大家參考;
首先我們可以把一個(gè)六邊形,拆開來看,就是中間一個(gè)矩形加左右各一個(gè)三角形,如圖:
這樣一拆解,就非常簡單了,我們可以用一個(gè)div來寫矩形,然后利用偽類before和after來實(shí)現(xiàn)左右的三角形;三角形可以用邊框border屬性來實(shí)現(xiàn)就可以了,具體實(shí)現(xiàn),請看下圖代碼:
效果圖:
總結(jié):
以上就是用css寫了一個(gè)六邊形,只要想清思路,實(shí)現(xiàn)起來就很簡單;
如有疑問,歡迎在評論下方留言討論;喜歡的記得點(diǎn)贊+關(guān)注,為大家提供專業(yè)的前端知識
網(wǎng)友解答:clip-path:polygon(22.5% 0,77.5% 0,77.5% 100%,22.5% 100%,0 50%)
一行就搞定了