網(wǎng)友解答: 利用css寫(xiě)一個(gè)六邊形方法有很多，下面我來(lái)說(shuō)一下我的實(shí)現(xiàn)方法，供大家參考；首先我們可以把一個(gè)六邊形，拆開(kāi)來(lái)看，就是中間一個(gè)矩形加左右各一個(gè)三角形，如圖：這樣一拆解，就非常簡(jiǎn)單

利用css寫(xiě)一個(gè)六邊形方法有很多，下面我來(lái)說(shuō)一下我的實(shí)現(xiàn)方法，供大家參考；

首先我們可以把一個(gè)六邊形，拆開(kāi)來(lái)看，就是中間一個(gè)矩形加左右各一個(gè)三角形，如圖：

這樣一拆解，就非常簡(jiǎn)單了，我們可以用一個(gè)div來(lái)寫(xiě)矩形，然后利用偽類(lèi)before和after來(lái)實(shí)現(xiàn)左右的三角形；三角形可以用邊框border屬性來(lái)實(shí)現(xiàn)就可以了，具體實(shí)現(xiàn)，請(qǐng)看下圖代碼：

效果圖：

總結(jié)：

以上就是用css寫(xiě)了一個(gè)六邊形，只要想清思路，實(shí)現(xiàn)起來(lái)就很簡(jiǎn)單；

如有疑問(wèn)，歡迎在評(píng)論下方留言討論；喜歡的記得點(diǎn)贊+關(guān)注，為大家提供專(zhuān)業(yè)的前端知識(shí)

clip-path:polygon(22.5% 0,77.5% 0,77.5% 100%,22.5% 100%,0 50%)

一行就搞定了