手把手教你使用CSS實(shí)現(xiàn)酷炫六邊形網(wǎng)格背景圖-全球快消息

今天，收到一個(gè)很有意思的提問，如何實(shí)現(xiàn)類似如下的背景效果圖：

(資料圖片)

嗯？核心主體是由多個(gè)六邊形網(wǎng)格疊加形成。

那么我們?cè)撊绾螌?shí)現(xiàn)它呢？使用純 CSS 能夠?qū)崿F(xiàn)嗎？

當(dāng)然可以，下面我們就將嘗試如何使用 CSS 去實(shí)現(xiàn)這樣一個(gè)背景效果?！就扑]學(xué)習(xí)：css視頻教程】

如何繪制六邊形？

首先，看到這樣一個(gè)圖形，如果想要使用一個(gè)標(biāo)簽完成整個(gè)背景，最先想到的肯定是使用背景 background 實(shí)現(xiàn)，不過可惜的是，盡管 CSS 中的 background 非常之強(qiáng)大，但是沒有特別好的方式讓它足以批量生成重復(fù)的六邊形背景。

因此，在這個(gè)需求中，我們可能不得不退而求其次，一個(gè)六邊形實(shí)現(xiàn)使用一個(gè)標(biāo)簽完成。

那么，就拿 1 個(gè) DIV 來說，我們有多少實(shí)現(xiàn)六邊形的方式呢？這里簡單介紹 2 種方式：

使用 border 或者 clip-path 實(shí)現(xiàn)六邊形

首先，使用 border 實(shí)現(xiàn)六邊形。這里的核心在于上下兩個(gè)三角形疊加中間一個(gè)矩形。這里，利用元素的兩個(gè)偽元素實(shí)現(xiàn)上下兩個(gè)三角形，從而讓這個(gè)元素看起來像一個(gè)六邊形。

思路比較簡單，直接上代碼：

.hexagon {  position: relative;  width: 200px;  height: 100px;  background-color: red;}.hexagon:before,.hexagon:after {  content: "";  position: absolute;  width: 0;  height: 0;  border-left: 100px solid transparent;  border-right: 100px solid transparent;}.hexagon:before {  bottom: 100%;  border-bottom: 50px solid red;}.hexagon:after {  top: 100%;  border-top: 50px solid red;}

上面的代碼會(huì)創(chuàng)建一個(gè)寬度為 200 像素，高度為 100 像素的六邊形，其中由兩個(gè)三角形和一個(gè)矩形組成。使用偽元素的優(yōu)點(diǎn)是可以很方便地控制六邊形的大小、顏色等樣式。

當(dāng)然，上述的代碼不是一個(gè)正六邊形，這是因?yàn)檎呅沃校?strong>元素的高是元素的寬的 1.1547 倍。

并且，上述的方式也稍微復(fù)雜了點(diǎn)，因此，在今天，我們更推薦使用 clip-path的方式去實(shí)現(xiàn)一個(gè)六邊形：

.clippath {    --w: 100px;    width: var(--w);    height: calc(var(--w) * 1.1547);    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);    background: deeppink;    margin: auto;}

這樣，基于 clip-path，也能快速得到一個(gè)六邊形圖形：

CodePen Demo -- Two ways to achieve a hexagon

繪制多個(gè)六邊形背景

好了，有了上一步的鋪墊之后，接下來我們要做的，就是繪制多個(gè)六邊形，組成背景。

但是我們仔細(xì)觀察一下由多個(gè)六邊形組成的背景，會(huì)發(fā)現(xiàn)每雙數(shù)行的的六邊形，需要向右側(cè)有一個(gè)明顯的縮進(jìn)，寬度大概為單個(gè)六邊形的寬度的一半：

這里其實(shí)是一個(gè)非常棘手的問題。首先，我們會(huì)想到這樣一種解決方案：

每一行為一組，設(shè)置一個(gè)父 div 容器，填滿六邊形元素，設(shè)置元素不換行

給偶數(shù)行設(shè)置一個(gè)固定的 margin-left

基于這個(gè)策略，我們的代碼，大概會(huì)是這樣：

<div class="container">    <div class="wrap">    // ... 填滿六邊形    </div>    <div class="wrap" style="margin-left: 25px">    // ... 填滿六邊形    </div>    <div class="wrap">    // ... 填滿六邊形    </div>    <div class="wrap" style="margin-left: 25px">    // ... 填滿六邊形    </div></div>

可以看到，我們給偶數(shù)行，都添加了一個(gè) margin-left。

但是這個(gè)代碼，會(huì)有幾個(gè)問題：

我們的頁面寬度不一定是固定的，那么每一行設(shè)置多少個(gè)子六邊形元素比較合適呢？設(shè)置多了勢(shì)必會(huì)帶來浪費(fèi)，少了又無法滿足需求

多了一層嵌套，代碼邏輯更為復(fù)雜

什么意思呢？也就是效果可能在屏幕非常寬的情況下，失效。

看看，正常情況，我們?cè)O(shè)置了每行 20 個(gè)六邊形，下圖是正常的

但是如果我們的屏幕特別寬，那么，可能會(huì)得到這樣一種效果：

因此，這種方式存在非常大的弊端，我們希望能有一整布局方式，能夠滿足我們?nèi)缦聝蓚€(gè)訴求：

所有六邊形代碼寫在一個(gè)父容器下

這個(gè)彈性布局中，第二行的元素最左邊，能夠?qū)崿F(xiàn)固定一個(gè)縮進(jìn)

仔細(xì)思考一下，CSS 中有能夠?qū)崿F(xiàn)類似布局的方法么？

妙用 shape-outside 實(shí)現(xiàn)隔行錯(cuò)位布局

有的！在 CSS 中，有一個(gè)神奇的元素能夠讓元素以非直線形式排布。它就是 shape-outside！

shape-outside是 CSS 中的一個(gè)屬性，用于控制元素的浮動(dòng)方式。它允許你定義一個(gè)元素浮動(dòng)時(shí)周圍元素的形狀。例如，你可以使用 shape-outside屬性來定義一個(gè)元素浮動(dòng)時(shí)周圍元素的形狀為圓形、六邊形等。

它和 clip-path的語法非常類似，很容易觸類旁通?？纯磳?shí)例，更易理解：

假設(shè)我們有下面這樣的結(jié)構(gòu)存在：

<div class="container">    <div class="shape-outside">      <img src="image.png">    </div>    xxxxxxxxxxx，文字描述，xxxxxxxxx</div>

定義如下 CSS：

.shape-outside {    width: 160px;    height: 160px;    shape-outside: circle(80px at 80px 80px);    float: left;}

注意，上面 .shape-outside使用了浮動(dòng)，并且定義了 shape-outside: circle(80px at 80px 80px)，表示在元素的 (80px, 80px) 坐標(biāo)處，生成一個(gè) 80px 半徑的圓。

如此，將會(huì)產(chǎn)生一種圖文混排的效果：

CodePen Demo -- 圖文混排 shape-outside

總得來說，shape-outside有兩個(gè)核心特點(diǎn)：

shape-outside屬性僅在元素定義了 float屬性且不為 none時(shí)才會(huì)生效

它能夠?qū)崿F(xiàn)了文字根據(jù)圖形的輪廓，在其周圍排列

shape-outside的本質(zhì)

劃重點(diǎn)，劃重點(diǎn)，劃重點(diǎn)。

所以，shape-outside的本質(zhì)其實(shí)是生成幾何圖形，并且裁剪掉其幾何圖形之外周圍的區(qū)域，讓內(nèi)容能排列在這些被裁剪區(qū)域之內(nèi)。

所以，了解了這個(gè)本質(zhì)之后，我們?cè)賹⑺\(yùn)用在上面的六邊形布局之中。

為了方便理解，我們首先使用文字代替上面的六邊形，假設(shè)我們有這樣一段文本內(nèi)容：

<p>Lorem ipsum dolor sit amet conse...</p>

p {    line-height: 36px;    font-size: 24px;}

非常平平無奇的一段代碼，效果如下：

現(xiàn)在，我們想利用 shape-outside，讓文本內(nèi)容的偶數(shù)行，向內(nèi)縮進(jìn) 24px，怎么實(shí)現(xiàn)呢？非常簡單：

p {    position: relative;    line-height: 36px;    font-size: 24px;    &::before {        content: "";        height: 100%;        width: 24px;        shape-outside: repeating-linear-gradient(            transparent 0,            transparent 36px,            #000 36px,            #000 72px        );        float: left;    }}

這樣，我們就實(shí)現(xiàn)了文字隔行縮進(jìn) 24px的效果：

一定有小伙伴會(huì)很好奇，為什么呢？核心在于我們利用元素的偽元素實(shí)現(xiàn)了一個(gè) shape-outside圖形，如果我們把這個(gè)圖形用 background繪制出來，其實(shí)它長這樣：

p {    position: relative;    line-height: 36px;    font-size: 24px;    &::before {        content: "";        height: 100%;        width: 24px;        shape-outside: repeating-linear-gradient(            transparent 0,            transparent 36px,            #000 36px,            #000 72px        );        float: left;        background: repeating-linear-gradient(            transparent 0,            transparent 36px,            #f00 36px,            #f00 72px        );    }}

效果如下：

因?yàn)槲谋镜男懈呤?36px，這樣我們以 72 為一段，每 36px 繪制一段透明，另外 36px 繪制一段寬為 24px 的內(nèi)容，這樣，結(jié)合 shape-outside的特性，我們就實(shí)現(xiàn)了隔行將內(nèi)容向里面擠 24px的效果！

非常的 Amazing 的技巧！完整的代碼你可以戳這里：

CodePen Demo -- Shape-outside achieves even line indentation

基于這個(gè)技巧，我們就可以實(shí)現(xiàn)上述我們想要的效果了。我們回到正題，重新實(shí)現(xiàn)一個(gè)充滿六邊形的背景：

<ul class="wrap">  <li></li>  //... 非常多個(gè) li<ul>

:root {  --s: 50px;  /* size  */  --m: 4px;    /* margin */  --perHeight: calc(calc(var(--s) * 2 * 1.1547) + calc(var(--m) * 4) - 0.4px)}.wrap {    position: relative;    height: 100%;    font-size: 0;    &::before {        content: "";        height: 100%;        width: 27px;        shape-outside: repeating-linear-gradient(            transparent 0,            transparent 70px,            #000 70px,            #000 var(--perHeight)        );        float: left;    }}li {    width: var(--s);    height: calc(var(--s) * 1.1547);     background: #000;    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);    margin: var(--m);    display: inline-block;}

借助 shape-outside，我們就實(shí)現(xiàn)了隔行讓我們的六邊形向內(nèi)縮進(jìn)的訴求！效果如下：

當(dāng)然，有一些優(yōu)化點(diǎn)：

為了讓兩邊不那么空，我們可以讓整個(gè)容器更寬一點(diǎn)，譬如寬度為父元素的 120%，然后水平居中，這樣，兩側(cè)的留白就解決了

讓兩行直接貼緊，可以設(shè)置一個(gè) margin-bottom

做完這兩點(diǎn)優(yōu)化之后，效果如下：

可以做到任意屏幕寬度下的六邊形完美平鋪布局：

完整的代碼你可以戳這里：CodePen Demo -- Hexagon Layout

配置上色彩變換

有了上述的鋪墊后，要實(shí)現(xiàn)文章一開頭的效果就不難了。

是的，我們要實(shí)現(xiàn)這樣一個(gè)效果：

如何讓它們動(dòng)態(tài)的實(shí)現(xiàn)顏色變換呢？是給每一個(gè)六邊形一個(gè)單獨(dú)的顏色，然后進(jìn)行動(dòng)畫嗎？不，借助混合模式，我們可以非常快速的實(shí)現(xiàn)不同的顏色值。

首先，我們將上述效果，改成白底黑色六邊形色塊：

然后，利用父容器剩余的一個(gè)偽元素，我們疊加一層漸變層上去：

.wrap {    position: relative;    // 代碼與上述保持一致    &::before {        content: "";        // ... 實(shí)現(xiàn) shape-outside 功能，代碼與上述保持一致    }        &::after {        content: "";        position: absolute;        inset: 0;        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);    }}

這樣，我們就疊加了一層漸變色彩層在原本的六邊形背景之上：

接著，只需要一個(gè)混合模式 mix-blend-mode: darken，就能實(shí)現(xiàn)六邊形色塊與上層漸變顏色的融合效果：

.wrap {    position: relative;    // 代碼與上述保持一致    &::before {        content: "";        // ... 實(shí)現(xiàn) shape-outside 功能，代碼與上述保持一致    }        &::after {        content: "";        position: absolute;        inset: 0;        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);        z-index: 1;      + mix-blend-mode: darken;    }}

效果如下：

好， 我們?cè)俳o上層的漸變色塊，添加一個(gè) filter: hue-rotate()動(dòng)畫，實(shí)現(xiàn)色彩的漸變動(dòng)畫：

.wrap {    position: relative;    // 代碼與上述保持一致    &::before {        content: "";        // ... 實(shí)現(xiàn) shape-outside 功能，代碼與上述保持一致    }        &::after {        content: "";        position: absolute;        inset: 0;        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);        z-index: 1;        mix-blend-mode: darken;      + animation: change 10s infinite linear;    }}@keyframes change {    100% {        filter: hue-rotate(360deg);    }}

這樣，我們就完美的實(shí)現(xiàn)了我們想要的效果：

完整的代碼，你可以戳這里：CodePen Demo -- Hexagon Gradient Layout

擴(kuò)展延伸

當(dāng)然，有了這個(gè)基礎(chǔ)圖形之后，其實(shí)我們可以基于這個(gè)圖形，去做非常多有意思的效果。

下面我是嘗試的一些效果示意，譬如，我們可以將顏色放置在六邊形背景的下方，制作這樣一種效果：

CodePen Demo -- Hexagon Gradient Layout

配合 mask 的蒙版效果及鼠標(biāo)定位，我們還能實(shí)現(xiàn)這樣一種有趣的交互效果：

CodePen Demo -- Hexagon Gradient & MASK Layout

當(dāng)然，3D 效果也不在話下：

CodePen Demo -- 3D Hexagon Gradient Layout

原文地址：https://www.cnblogs.com/coco1s/p/17005071.html

作者：ChokCoco

（學(xué)習(xí)視頻分享：web前端）

以上就是手把手教你使用CSS實(shí)現(xiàn)酷炫六邊形網(wǎng)格背景圖的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： CSS3