首頁 > web前端 > css教學 > 主體

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

php中世界最好的语言
發布: 2018-03-20 16:52:52
原創
2513 人瀏覽過

這次帶給大家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 。

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

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




    
    
    
    Document
    


    <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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板