css實現圖片背景填充的正六邊形

xieqingtian發表於2019-02-27
CSS

最近有個需求需要實現帶有圖片背景的正六邊形，這裡記錄一下我自己實現的方法。

我專案裡的最終效果大概是這樣子的，這裡我們只演示實現一個正六邊形。

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

這裡為了得到一個正的六邊形，兩個矩形旋轉的角度必須為-60deg和60deg，以及矩形高寬比必須是Math.sqrt(3) : 1， 原諒我不會打根號3 (:3」∠)。

那麼首先我們得建立三個重疊的矩形： 

    <div class="hexagon">
        <div class="hexagon__item hexagon__item_left"></div>
        <div class="hexagon__item hexagon__item_center"></div>
        <div class="hexagon__item hexagon__item_right"></div>
    </div>複製程式碼

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

       .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }

        .hexagon__item {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }

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

        .hexagon__item_right {
            transform: rotate(60deg);
        }複製程式碼

這樣就很簡單得到了下面這個六邊形了。

那麼我們要如何才能使得藍色背景變成圖片呢，其實也很簡單，上述的三個矩形其實只是起到了一個塑形的作用，實際上是應該設定為 visibility: hidden 的，我們需要給三個矩形分別新增一個矩形的子元素並且設定為 visibility: visible 。三個子元素的寬高需要正好能覆蓋之前的藍色六邊形，如下圖示意：

之後給上面橘色的矩形設定背景圖片，給它的父元素也就是.hexagon__item設定overflow: hidden 就差不多大功告成了。

為了使得html結構精簡一些，這裡使用偽元素作為矩形的子元素。 

        .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }

        .hexagon__item {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;
            overflow: hidden;
        }

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

        .hexagon__item_right {
            transform: rotate(60deg);
        }

        .hexagon__item:before{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            height: 100%;
            width: 120px;
            visibility: visible;
            background: url(`https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=13897784,1115290966&fm=58`) no-repeat;
            background-size: cover;
            transform-origin: 0 0;
        }複製程式碼

上面的偽元素寬度為120px是怎麼計算得來的呢？其實正好就是其父元素寬度的2倍，不熟悉勾股定理的趕緊去複習一下就好了，哈哈！
於是我們得到了下面的樣子。

看起來效果還差了點，最後一步我們只需要把幾個偽元素旋轉變換一下即可。這裡注意一下，偽元素的旋轉中心需要設定為 transform-origin: 0 0 ，即以左上角為中心旋轉。 

        .hexagon__item_left:before {
            transform: rotate(60deg) translateY(-50%);
        }

        .hexagon__item_right:before {
            transform: rotate(-60deg) translateX(-75%);
        }

        .hexagon__item_center:before {
            transform: translateX(-25%);
        }複製程式碼

什麼， 你問我為什麼偽元素的旋轉變換又是rotate 60deg，又是translate 50% 20 % 75% 的？

我當然也是自己慢慢試出來的啊，我數學也不好哈，sorry！
最後我們的圖片背景的正六邊形就完成了。

最後的最後，奉上完整程式碼，需要的同學儘管拿去研究吧，哈！ 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }

        .hexagon__item {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;
            overflow: hidden;
        }

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

        .hexagon__item_right {
            transform: rotate(60deg);
        }

        .hexagon__item:before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            height: 100%;
            width: 120px;
            visibility: visible;
            background: url(`https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=13897784,1115290966&fm=58`) no-repeat;
            background-size: cover;
            transform-origin: 0 0;
        }

        .hexagon__item_left:before {
            transform: rotate(60deg) translateY(-50%);
        }

        .hexagon__item_right:before {
            transform: rotate(-60deg) translateX(-75%);
        }

        .hexagon__item_center:before {
            transform: translateX(-25%);
        }
    </style>
</head>

<body>
    <div class="hexagon">
        <div class="hexagon__item hexagon__item_left"></div>
        <div class="hexagon__item hexagon__item_center"></div>
        <div class="hexagon__item hexagon__item_right"></div>
    </div>
</body>

</html>複製程式碼

github的連結在這裡 github.com/sundaypig/b…

相關文章