CSS-蜂窩狀展示區(qū)域（多個(gè)六邊形）的一種實(shí)現(xiàn)方式

ideaa 發(fā)布于2019-04-23 11:52 / 1264人閱讀

摘要：網(wǎng)上已經(jīng)有很多關(guān)于正六邊形的畫法，主要是利用一個(gè)矩形和前后的兩個(gè)三角形組合而成。是內(nèi)容區(qū)，是一個(gè)菱形切割區(qū)，將切割成六邊形。的高度，多排六邊形的情況下，的高度與排與排之間的間隙有關(guān)。的高度，六邊形對(duì)應(yīng)頂點(diǎn)間的距離。

網(wǎng)上已經(jīng)有很多關(guān)于正六邊形的CSS畫法，主要是利用一個(gè)矩形和前后的兩個(gè)三角形組合而成。

之前在看四維圖新的官網(wǎng)的時(shí)候，發(fā)現(xiàn)了一種六邊形的畫法，比較適合多排六邊形組合成蜂窩狀的展示區(qū)域（注：四維圖新現(xiàn)在改成了上面說(shuō)的那種畫法了）。

示意圖：

1、HTML結(jié)構(gòu)

　　每個(gè)li里包著.hex和.hexIn。.hexIn是內(nèi)容區(qū)，.hex是一個(gè)菱形切割區(qū)，將.hexIn切割成六邊形。具體看css。

2、CSS

      ul {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 560px;
        margin: 100px auto;
      }
      li {
        float: left;
        margin: 0 5px;
        height: 96px;
      }
      .hex {
        overflow: hidden;
        display: block;
        width: 100px;
        height: 116px;
        transform: rotate(-60deg) skewY(30deg);
      }
      .hexIn {
        background-color: #ccc;
        display: block;
        width: 100px;
        height: 116px;
        line-height: 116px;
        text-align: center;
        transform: skewY(-30deg) rotate(60deg);
      }
      li:nth-child(9n + 6) {
        margin-left: 60px;
      }

　　里面有幾個(gè)關(guān)鍵的長(zhǎng)度和寬度：

li的寬度，li的寬度由內(nèi)部元素?fù)伍_。
li的高度，多排六邊形的情況下，li的高度與排與排之間的間隙有關(guān)。
.hex的寬度，即六邊形平行邊之間的距離。
.hex的高度，六邊形對(duì)應(yīng)頂點(diǎn)間的距離。
.hexIn的高度和寬度同.hex。

.hexIn區(qū)域如圖：

.hex區(qū)域如圖：

li區(qū)域如圖：

根據(jù)以上的寬度和高度說(shuō)明，以上數(shù)值都要滿足一定的關(guān)系，直接說(shuō)結(jié)論：

假設(shè)需要平行邊距離為w的六邊形，每個(gè)六邊形之間的間隔為m。

那么：

?li的高度：0.866(w+m)
.hex的寬度：w，高度：1.155w
.hexIn同上
如果第一排有x個(gè)六邊形，那么為實(shí)現(xiàn)相鄰兩排交錯(cuò)排列的效果，需要設(shè)置：li:nth(`x + x - 1`n + `x + 1`) { margin-left: 0.5(w+2m) }。比如第一排有6個(gè)，那么li:nth(11n+7) { ... }.

3、實(shí)現(xiàn)效果圖