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…