css實(shí)現(xiàn)六邊形的方法：1、將3個(gè)p組合在一起，其中包括2個(gè)等腰三角形和一個(gè)長(zhǎng)方形；2、通過(guò)將3個(gè)長(zhǎng)方形旋轉(zhuǎn)不同角度得到正六邊形。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

css怎么實(shí)現(xiàn)六邊形？

最近在寫(xiě)一個(gè)蜂窩式布局,所以研究了一下六邊形的實(shí)現(xiàn)原理
實(shí)現(xiàn)六邊形的倆種方式:
方式一： 一個(gè)長(zhǎng)方形+兩個(gè)三角形
首先我們要先了解一下border

每個(gè)border之間是成45度,利用這點(diǎn)我們可以做出來(lái)三角形

<p class="triangle"></p>/*css片段*/.triangle{     width: 0;     height: 0;     border-bottom: 50px solid red;     border-left: 86px solid transparent;     border-right: 86px solid transparent; }

上面代碼可以的到一個(gè)頂角為120度的等腰三角形

我們采取制作六邊形的方式就是將3個(gè)p組合在一起,上下為120度的等腰三角形,中間為長(zhǎng)方形(注意：border-top/border-bottom決定的是三角形的高)
下面我們來(lái)實(shí)現(xiàn)六邊形

<p class="top-triangle"></p> <p class="center"></p> <p class="bottom-triangle"></p> /*css片段*/ .top-triangle{     width: 0;     height: 0;     border-bottom: 50px solid red;     border-left: 86px solid transparent;     border-right: 86px solid transparent; } .center{     width: 172px;     height: 100px;     background: red; } .bottom-triangle{     width: 0;     height: 0;     border-top: 50px solid red;     border-left: 86px solid transparent;     border-right: 86px solid transparent; }

由上面代碼我們就可以得到一個(gè)正六變形
方式二： 3個(gè)長(zhǎng)方形旋轉(zhuǎn)不同角度得到正六邊形
關(guān)鍵點(diǎn): overflow: hidden;
transform: rotate()的使用

<p class="six">     <p class="child">         <p class="child_child"></p>     </p></p>/*css片段*/.six,.child,.child_child{     width: 100px;     height: 150px;     overflow: hidden; }.six{    -webkit-transform: rotate(120deg);    -o-transform: rotate(120deg);    -ms-transform: rotate(120deg);    -moz-transform: rotate(120deg);     transform: rotate(120deg); }.child{    -webkit-transform: rotate(-60deg);    -o-transform: rotate(-60deg);    -ms-transform: rotate(-60deg);    -moz-transform: rotate(-60deg);     transform: rotate(-60deg); }.child_child{     background: red;    -webkit-transform: rotate(-60deg);    -o-transform: rotate(-60deg);    -ms-transform: rotate(-60deg);    -moz-transform: rotate(-60deg);     transform: rotate(-60deg); }

可以為最里面的p加背景或者圖片,外面的倆個(gè)p不要加顏色,但是這種方式創(chuàng)建的六邊形沒(méi)有辦法添加文字，執(zhí)行上面代碼可以得到下圖:

【推薦學(xué)習(xí)：《css視頻教程》】