CSS做出圖片背景填滿的六邊形

這次帶給大家CSS做出圖片背景填充的六邊形，CSS做出圖片背景填充的六邊形的注意事項有哪些，下面就是實戰案例，一起來看一下。

六邊形的實現原理其實就是透過旋轉三個重疊的矩形得到的，如下圖所示：

這裡為了得到一個正的六邊形，兩個矩形旋轉的角度必須為-60deg和60deg，以及矩形高寬比必須是Math.sqrt(3) : 1

那麼首先我們要建立三個矩形：

    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

我們設定三個矩形的寬高分別為60px和104px，背景色為藍色，.hexagonitem_left旋轉-60deg，.hexagonitem_right旋轉60deg，.hexagonitem_center不旋轉。

      .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }
        .hexagonitem {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagonitem_left {
            transform: rotate(-60deg);
        }
        .hexagonitem_right {
            transform: rotate(60deg);
        }

這樣就簡單的得到了一個正六邊形。

那麼我們要如何才能使得藍色背景變成圖片呢，其實也很簡單，上述的三個矩形其實只是起到了一個塑形的作用，實際上是應該設置為visibility : hidden 的，我們需要為三個矩形分別添加一個矩形的子元素並且設定為visibility: visible 。

三個子元素的寬高需要剛好能覆蓋之前的藍色六邊形。

做好程式碼如下，大家可以好好研究一下

    
    
    
    
    


    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS怪異盒模型和標準盒模型如何使用

##CSS實現手風琴佈局

以上是CSS做出圖片背景填滿的六邊形的詳細內容。更多資訊請關注PHP中文網其他相關文章！