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

時間 2019-11-30

標籤 css 實現圖片背景填充正六邊形欄目 CSS 简体版

原文原文鏈接

最近有個需求須要實現帶有圖片背景的正六邊形，這裏記錄一下我本身實現的方法。 css

我項目裏的最終效果大概是這樣子的，這裏咱們只演示實現一個正六邊形。 html

六邊形的實現原理其實就是經過旋轉三個重疊的矩形獲得的，以下圖所示： git

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

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

<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不旋轉。 url

.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);
        }複製代碼

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

那麼咱們要如何才能使得藍色背景變成圖片呢，其實也很簡單，上述的三個矩形其實只是起到了一個塑形的做用，其實是應該設置爲 visibility: hidden 的，咱們須要給三個矩形分別添加一個矩形的子元素而且設置爲 visibility: visible 。三個子元素的寬高須要正好能覆蓋以前的藍色六邊形，以下圖示意： 3d

以後給上面橘色的矩形設置背景圖片，給它的父元素也就是.hexagon__item設置overflow: hidden 就差很少大功告成了。 code

爲了使得html結構精簡一些，這裏使用僞元素做爲矩形的子元素。 orm

.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…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。