因為很簡單，所以先總結一下：使用CSS3繪制六邊形主要使用偽類:before和:after在源元素之前和之后再繪制兩個元素，并利用css3的邊框樣式，將這兩個元素變成三角形放置在源元素的兩端即可。

（因為之前在生物公司工作過，覺得六邊形更貼近生物分子、基因等概念，包括我們在網上搜索關于生物分子、基因等圖片，好多也有六邊形的樣式，所以那時候在頁面做一些功能性的導航或Tag，都會覺得六邊形更貼近一些）。

完整的頁面效果如下圖：（其實是多個六邊形定位成這樣子的。當然，也可以設置不同六邊形的顏色，這樣就可以更好的區分不同的模塊功能了）。

我們可以單獨提出一個六邊形分析一下，如下圖：

知道了分析思路，我們可以先了解一下如何繪制三角形，網上的列子也很多，不過沒有使用過的童鞋不用找了，下面也給出代碼和示例，如下:

效果圖：

CSS代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表