小編給大家分享一下CSS3如何繪制六邊形，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、康馬網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、成都h5網(wǎng)站建設、商城網(wǎng)站定制開發(fā)、集團公司官網(wǎng)建設、成都外貿網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為康馬等各大城市提供網(wǎng)站開發(fā)制作服務。
因為很簡單，所以先總結一下：使用CSS3繪制六邊形主要使用偽類:before和:after在源元素之前和之后再繪制兩個元素，并利用css3的邊框樣式，將這兩個元素變成三角形放置在源元素的兩端即可。
（因為之前在生物公司工作過，覺得六邊形更貼近生物分子、基因等概念，包括我們在網(wǎng)上搜索關于生物分子、基因等圖片，好多也有六邊形的樣式，所以那時候在頁面做一些功能性的導航或Tag，都會覺得六邊形更貼近一些）。
完整的頁面效果如下圖：（其實是多個六邊形定位成這樣子的。當然，也可以設置不同六邊形的顏色，這樣就可以更好的區(qū)分不同的模塊功能了）。
我們可以單獨提出一個六邊形分析一下，如下圖：
知道了分析思路，我們可以先了解一下如何繪制三角形，網(wǎng)上的列子也很多，不過沒有使用過的童鞋不用找了，下面也給出代碼和示例，如下:
效果圖：
CSS代碼：
CSS Code復制內容到剪貼板
重慶分公司
重慶分公司
.arrow{
display: inline-block;
width:0px;
height: 0px;
border-style: solid;
border-width: 100px; //與padding、margin屬性類似，順序為上、右、下、左
border-color: red blue orange gray; //順序為上、右、下、左}HTML代碼：
XML/HTML Code復制內容到剪貼板
如上圖所說，利用border邊框屬性，填充我們不想要的顏色為透明色，即可得到某一部分三角形，代碼和圖片效果如下。
效果圖：（左邊的三角形是我們需要的，其它的設置為了透明色）
CSS代碼：
CSS Code復制內容到剪貼板
.arrow{
display: inline-block;
width:0px;
height: 0px;
border-bottom: 100px solid transparent; //設置透明色
border-top: 100px solid transparent; //設置透明色
border-right: 100px solid transparent; //設置透明色
border-left: 100px solid gray;
}HTML代碼：
XML/HTML Code復制內容到剪貼板
Okay。知道了如何畫三角形，在利用CSS偽類:before和:after就可以完成我們想要繪制的六邊形了。
:before是在元素的前面插入內容
:after是在元素的后面插入內容
如果我們想要插入一些文字性的內容可以在它的 content屬性中錄入需要展示的文字，例如 content:"HELLO WORLD",不過我們的例子是不需要展示額外信息的。我們只是需要將before和after這兩個偽元素變成三角形放置到固定位置即可。
給出完整的代碼如下：
XML/HTML Code復制內容到剪貼板