教你作炫酷的蜂巢式圖片牆

以前博主寫了幾篇博文都是屬於前端基礎技術的總結，這個週末打算髮布兩到三篇博文來給你們點「乾貨」。

之因此把話說這麼早實際上是想給本身點壓力，省得又偷懶跳票了....

幾個月前瀏覽過一個外國的扁平化網站，裏面的正六邊形圖片很炫酷，給了我很深的印象，這兩天試着作了下。

廢話很少說，奉上個人隨興之做！

 

看到這裏，我想先說一句：MH的獵友們！請！頂！我！

六邊形的圖片牆，它的好處在哪呢？普通正方形的圖片排版起來比較死板，沒有新意。而正六邊形的圖片不只顯得很炫酷，並且還有其特殊的規則感。

有的人確定會說了，我直接拿PS切一個出來不就行了？幹嗎還要用代碼寫？答案就是當你把框架寫好了，只須要更換圖片地址url便可，而不須要每一張都要處理，關鍵是代碼也比較簡單。

首先咱們先分析一下：

怎麼作一個六邊形？實際上是三個矩形div旋轉獲得的，例如中間橫着的矩形。

先假定所需的邊長爲：100px，那矩形的寬，也就是紅線所示爲多長？對角線爲2倍邊長，因此寬爲根號3倍的邊長，大概是173px。

結構以下：

<div class="box">
     <div class="first"></div>
     <div class="second"></div>
     <div class="third"></div>
</div>

這裏外面包了個類名爲box的div是爲了方便多個六邊形時佈局，不用太過關注。

將三個div絕對定位，以使它們重合。並正逆方向旋轉其中兩個：

 .first{
            height: 100px;
            width: 173px;
            background-color: red;
            position: absolute;
        }
 .second{
            height: 100px;
            width: 173px;
            background-color: blue;
            position: absolute;
            -webkit-transform:rotate(60deg);
        }
 .third{
            height: 100px;
            width: 173px;
            background-color: green;
            position: absolute;
            -webkit-transform:rotate(-60deg);
        } 

獲得正六邊形：

接下來就是如何把圖片也裁成六邊形，先在第一個div中插入圖片：

    <div class="box">
        <div class="first">
            <img class="firstImg" src="26_120414101155_1.jpg" width="173px" height="200px">
        </div>
        <div class="second"></div>
        <div class="third"></div>
    </div>

注意：圖片的寬度爲div的寬度，高度爲兩倍div高度。爲了圖片不失真，最好把圖片尺寸的高寬比裁爲 根號3比2的。

結果：

這裏圖片還須要向上移動一點，這裏告訴你們一個祕訣，那就是上移div高度的一半剛恰好，不用你們算了。

 .firstImg{
         margin-top: -50px;
  }

而後設置父級div的overflow:hidden

結果：

加入第二張圖片：

 <div class="box">
        <div class="first">
            <img class="firstImg" src="26_120414101155_1.png" width="173px" height="200px">
        </div>
        <div class="second">
            <img class="secondImg" src="26_120414101155_1.png" width="173px" height="200px">
        </div>
        <div class="third"></div>
 </div>

 

注意插入的圖片父級是旋轉過的，因此須要讓圖片轉回來，也就是轉父級div相反的角度。

.secondImg{
            -webkit-transform:rotate(-60deg);
        }

結果：

怎麼讓它往右上呢？其實仍是margin-top:-50px;這裏要說下爲何，由於它的父級旋轉過了。這時再將圖片上移就不是咱們視角的上方了，而是它「躺倒」了的爸爸div的上方。

而後讓它的父級overflow:hidden

結果：

你們這下看出來了吧，實際上是三張相同的圖片用各自的部分拼出來的。

第三張一樣作法：1.跟父級相反方向旋轉 2.上移

大功告成：

邊框怎麼作？其實思考下就明白，六邊形的邊實際上是三個div的左邊框及右邊框圍成的。因此只用設置border-left及border-right。

但要注意最多3px，不然會出現缺口，像這樣：

OK，接下來我把整理後的代碼發給你們，只須要更改些參數便可，排版神馬的本身創意吧。

HTML部分：

<div class="box">
            <div class="first">
                <img class="firstImg" src="" width="190px" height="220px">
            </div>
            <div class="second">
                <img class="secondImg" src="" width="190px" height="220px">
            </div>
            <div class="third">
                <img class="thirdImg"  src="" width="190px" height="220px">
            </div>
</div>

 

CSS部分：

 　　　　.box{
            height: 100px;
            width: 190px;
            display: inline-block;
            position: relative;
        }
        .first{
            height: 110px;
            width: 190px;
            background-color: #ee6557;
            position: absolute;
            overflow: hidden;
            z-index: 999999;
            border-left: 2px solid #c8a200;
            border-right :2px solid #c8a200;
        }
        .second{
            height: 110px;
            width: 190px;
            -webkit-transform:rotate(60deg);
            background-color:#ee6557;
            position: absolute;
            overflow: hidden;
            border-left: 2px solid #c8a200;
            border-right :2px solid #c8a200;
        }
        .third{
            height: 110px;
            width: 190px;
            -webkit-transform:rotate(-60deg);
            background-color: #ee6557;
            position: absolute;
            overflow: hidden;
            border-left: 2px solid #c8a200;
            border-right :2px solid #c8a200;
        }
        .firstImg{
            margin-top: -55px;
        }
        .secondImg{
            -webkit-transform:rotate(-60deg);
            margin-top: -55px;
        }
        .thirdImg{
            -webkit-transform:rotate(60deg);
            margin-top: -55px;
        }

 

感謝您的瀏覽，但願能對您有所幫助。