CSS реализует правильный шестиугольник, заполненный фоновым изображением

С недавних пор возникла необходимость реализовать правильный шестиугольник с фоновой картинкой.Здесь записываю свой способ реализации.

Конечный эффект в моем проекте, наверное, такой, здесь мы только демонстрируем реализацию правильного шестиугольника.

Принцип реализации шестиугольника на самом деле получается путем вращения трех перекрывающихся прямоугольников, как показано на следующем рисунке:

Здесь, чтобы получить правильный шестиугольник, угол поворота двух прямоугольников должен быть равен -60 градусов и 60 градусов, а соотношение сторон прямоугольников должно быть Math.(: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 соответственно, цвет фона синий и .hexagon.item_left повернуть -60 градусов, .шестиугольникitem_right поворачивается на 60 градусов, .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;
        }

Как рассчитывается ширина псевдоэлемента выше 120 пикселей? На самом деле, он ровно в два раза шире своего родительского элемента.Если вы не знакомы с теоремой Пифагора, просто посмотрите на нее, ха-ха!
Таким образом, мы получаем следующий вид.

Кажется, что эффект все же немного хуже На последнем шаге нам нужно только повернуть и трансформировать несколько псевдоэлементов. Обратите внимание, что центр вращения псевдоэлемента должен быть установлен на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%);
        }

Что, вы спросите меня, почему преобразование вращения псевдоэлемента вращается на 60 градусов и переводит 50% 20% 75%?

Конечно, я попробовал это сам, и я не силен в математике, извините!
Наконец, правильный шестиугольник фона нашего изображения завершен.

В конце концов, я предоставлю полный код, и студенты, которым он нужен, смогут его изучить, ха!

<!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.com/Воскресная свинья/нет…