CSS를 사용하여 멋진 육각형 격자 배경 이미지를 구현하는 방법을 단계별로 가르쳐주세요.

이 기사에서는 불규칙한 그래픽 배경 레이아웃의 고급 기술을 공유하고 CSS를 사용하여 멋진 육각형 그리드 배경 이미지를 구현하는 방법을 소개합니다. 모두에게 도움이 되기를 바랍니다.

오늘 저는 다음과 유사한 배경 렌더링을 얻는 방법에 대한 매우 흥미로운 질문을 받았습니다.

음? 코어 본체는 여러 개의 육각형 그리드를 겹쳐서 형성됩니다.

그렇다면 어떻게 달성할 수 있나요? 순수한 CSS를 사용하여 이것이 가능합니까?

물론 가능합니다. 아래에서는 CSS를 사용하여 이러한 배경 효과를 얻는 방법을 시도해 보겠습니다. [추천 학습: css 동영상 튜토리얼]

육각형을 그리는 방법은?

먼저 이런 그래픽을 볼 때, 라벨을 이용해 배경 전체를 완성하고 싶다면 가장 먼저 떠오르는 것은 당연히 배경을 사용하는 것입니다. 하지만 아쉽게도 CSS의 배경은 매우 다양합니다. 강력하지만 일괄적으로 반복되는 육각형 배경을 생성하는 데는 특히 좋은 방법은 아닙니다.

그래서 이 요구 사항에서는 차선책을 선택하고 라벨을 사용하여 육각형을 구현해야 할 수도 있습니다.

그렇다면 1개의 DIV를 예로 들자면 육각형을 구현하려면 몇 가지 방법이 필요할까요? 간략하게 소개하는 2가지 방법은 다음과 같습니다.

• 테두리를 사용하여 육각형 구현
• 클립 경로를 사용하여 육각형 구현

테두리 또는 클립 경로를 사용하여 육각형 구현

먼저 테두리를 사용하여 육각형 모양을 구현합니다. 여기서 핵심은 위쪽 및 아래쪽 삼각형이 중앙의 직사각형과 겹친다는 것입니다. 여기서는 요소의 2개의 유사 요소를 사용하여 위쪽 삼각형과 아래쪽 삼각형을 구현하여 요소가 육각형처럼 보이도록 합니다.

아이디어는 비교적 간단합니다. 다음 코드로 이동하세요.

.hexagon {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: red;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 50px solid red;
}

.hexagon:after {
  top: 100%;
  border-top: 50px solid red;
}

위 코드는 두 개의 삼각형과 직사각형으로 구성된 너비 200픽셀, 높이 100픽셀의 육각형을 만듭니다. 의사 요소를 사용하면 육각형의 크기, 색상 및 기타 스타일을 쉽게 제어할 수 있다는 장점이 있습니다.

물론 위의 코드는 정육각형이 아닙니다. 이는 정육각형에서 요소의 높이가 요소 너비의 1.1547배이기 때문입니다.

또한 위의 방법은 좀 더 복잡하므로 오늘은 clip-path 방법을 사용하여 육각형을 구현하는 것을 권장합니다. clip-path 的方式去实现一个六边形：

.clippath {
    --w: 100px;
    width: var(--w);
    height: calc(var(--w) * 1.1547);
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: deeppink;
    margin: auto;
}

这样，基于 clip-path，也能快速得到一个六边形图形：

CodePen Demo -- Two ways to achieve a hexagon

绘制多个六边形背景

好了，有了上一步的铺垫之后，接下来我们要做的，就是绘制多个六边形，组成背景。

但是我们仔细观察一下由多个六边形组成的背景，会发现每双数行的的六边形，需要向右侧有一个明显的缩进，宽度大概为单个六边形的宽度的一半：

这里其实是一个非常棘手的问题。首先，我们会想到这样一种解决方案：

• 每一行为一组，设置一个父 div 容器，填满六边形元素，设置元素不换行

• 给偶数行设置一个固定的 margin-left

基于这个策略，我们的代码，大概会是这样：

<div class="container">
    <div class="wrap">
    // ... 填满六边形
    </div>
    <div class="wrap" style="margin-left: 25px">
    // ... 填满六边形
    </div>
    <div class="wrap">
    // ... 填满六边形
    </div>
    <div class="wrap" style="margin-left: 25px">
    // ... 填满六边形
    </div>
</div>

可以看到，我们给偶数行，都添加了一个 margin-left

<div class="container">
    <div class="shape-outside">
      <img src="image.png">
    </div>
    xxxxxxxxxxx，文字描述，xxxxxxxxx
</div>

이런 식으로 클립을 기반으로 합니다. -path를 사용하면 육각형 그래픽을 빠르게 얻을 수도 있습니다:

• CodePen 데모 -- 달성하는 두 가지 방법 a 육각형

여러 육각형 배경 그리기

• 자, 이전 단계의 기초를 다지고 나면 다음으로 해야 할 일은 여러 육각형을 그려 배경을 만드는 것입니다.

그러나 여러 개의 육각형으로 구성된 배경을 자세히 살펴보면 각 짝수 행의 육각형은 오른쪽으로 뚜렷하게 들여쓰기가 있어야 하며 너비는 육각형 하나의 너비와 비슷하다는 것을 알 수 있습니다. . 반:

여기 사실은 매우 어려운 질문입니다. 우선 다음과 같은 해결책을 생각해 보겠습니다.

각 행을 그룹화하고, 상위 div 컨테이너를 설정하고, 육각형 요소로 채우고, 요소를 감싸지 않도록 설정합니다.

짝수에 대해 고정 margin-left🎜🎜🎜🎜이 전략을 기반으로 우리 코드는 아마도 다음과 같을 것입니다:🎜

.shape-outside {
    width: 160px;
    height: 160px;
    shape-outside: circle(80px at 80px 80px);
    float: left;
}

🎜보시다시피 모든 행에 margin-left를 추가했습니다. 짝수행 코드>. 🎜🎜하지만 이 코드에는 몇 가지 문제가 있습니다. 🎜🎜🎜🎜페이지 너비가 반드시 고정되어 있는 것은 아니므로 각 행에 몇 개의 하위 육각형 요소를 설정해야 합니까? 설정이 너무 많으면 필연적으로 낭비가 발생하고 설정이 너무 적으면 요구 사항이 충족되지 않습니다. 추가 중첩 계층은 코드 논리를 더 복잡하게 만듭니다. 즉, 화면이 너무 넓으면 효과가 실패할 수 있습니다. 🎜🎜보세요, 일반적인 상황에서는 행당 20개의 육각형을 설정합니다. 아래 그림은 정상입니다🎜🎜🎜🎜🎜하지만 화면이 특히 넓다면 다음과 같은 효과가 나타날 수 있습니다.🎜🎜🎜 🎜

因此，这种方式存在非常大的弊端，我们希望能有一整布局方式，能够满足我们如下两个诉求：

• 所有六边形代码写在一个父容器下

• 这个弹性布局中，第二行的元素最左边，能够实现固定一个缩进

仔细思考一下，CSS 中有能够实现类似布局的方法么？

妙用 shape-outside 实现隔行错位布局

有的！在 CSS 中，有一个神奇的元素能够让元素以非直线形式排布。它就是 shape-outside！

如果你对 shape-outside 不太了解，也可以先看看我的这篇文章 -- 奇妙的 CSS shapes

shape-outside 是 CSS 中的一个属性，用于控制元素的浮动方式。它允许你定义一个元素浮动时周围元素的形状。例如，你可以使用 shape-outside 属性来定义一个元素浮动时周围元素的形状为圆形、六边形等。

它和 clip-path 的语法非常类似，很容易触类旁通。看看实例，更易理解：

假设我们有下面这样的结构存在：

<div class="container">
    <div class="shape-outside">
      <img src="image.png">
    </div>
    xxxxxxxxxxx，文字描述，xxxxxxxxx
</div>

定义如下 CSS：

.shape-outside {
    width: 160px;
    height: 160px;
    shape-outside: circle(80px at 80px 80px);
    float: left;
}

注意，上面 .shape-outside 使用了浮动，并且定义了 shape-outside: circle(80px at 80px 80px) ，表示在元素的 (80px, 80px) 坐标处，生成一个 80px 半径的圆。

如此，将会产生一种图文混排的效果：

CodePen Demo -- 图文混排 shape-outside

总得来说，shape-outside 有两个核心特点：

• shape-outside 属性仅在元素定义了 float 属性且不为 none 时才会生效

• 它能够实现了文字根据图形的轮廓，在其周围排列

shape-outside 的本质

划重点，划重点，划重点。

所以，shape-outside 的本质其实是生成几何图形，并且裁剪掉其几何图形之外周围的区域，让内容能排列在这些被裁剪区域之内。

所以，了解了这个本质之后，我们再将他运用在上面的六边形布局之中。

为了方便理解，我们首先使用文字代替上面的六边形，假设我们有这样一段文本内容：

<p>
Lorem ipsum dolor sit amet conse...
</p>

p {
    line-height: 36px;
    font-size: 24px;
}

非常平平无奇的一段代码，效果如下：

现在，我们想利用 shape-outside，让文本内容的偶数行，向内缩进 24px，怎么实现呢？非常简单：

p {
    position: relative;
    line-height: 36px;
    font-size: 24px;

    &::before {
        content: "";
        height: 100%;
        width: 24px;
        shape-outside: repeating-linear-gradient(
            transparent 0,
            transparent 36px,
            #000 36px,
            #000 72px
        );
        float: left;
    }
}

这样，我们就实现了文字隔行缩进 24px 的效果：

一定有小伙伴会很好奇，为什么呢？核心在于我们利用元素的伪元素实现了一个 shape-outside 图形，如果我们把这个图形用 background 绘制出来，其实它长这样：

p {
    position: relative;
    line-height: 36px;
    font-size: 24px;

    &::before {
        content: "";
        height: 100%;
        width: 24px;
        shape-outside: repeating-linear-gradient(
            transparent 0,
            transparent 36px,
            #000 36px,
            #000 72px
        );
        float: left;
        background: repeating-linear-gradient(
            transparent 0,
            transparent 36px,
            #f00 36px,
            #f00 72px
        );
    }
}

效果如下：

因为文本的行高是 36px，这样我们以 72 为一段，每 36px 绘制一段透明，另外 36px 绘制一段宽为 24px 的内容，这样，结合 shape-outside 的特性，我们就实现了隔行将内容向里面挤 24px 的效果！

非常的 Amazing 的技巧！完整的代码你可以戳这里：

CodePen Demo -- Shape-outside achieves even line indentation

基于这个技巧，我们就可以实现上述我们想要的效果了。我们回到正题，重新实现一个充满六边形的背景：

<ul class="wrap">
  <li></li>
  //... 非常多个 li
<ul>

:root {
  --s: 50px;  /* size  */
  --m: 4px;    /* margin */
  --perHeight: calc(calc(var(--s) * 2 * 1.1547) + calc(var(--m) * 4) - 0.4px)
}

.wrap {
    position: relative;
    height: 100%;
    font-size: 0;

    &::before {
        content: "";
        height: 100%;
        width: 27px;
        shape-outside: repeating-linear-gradient(
            transparent 0,
            transparent 70px,
            #000 70px,
            #000 var(--perHeight)
        );
        float: left;
    }
}

li {
    width: var(--s);
    height: calc(var(--s) * 1.1547); 
    background: #000;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    margin: var(--m);
    display: inline-block;
}

借助 shape-outside，我们就实现了隔行让我们的六边形向内缩进的诉求！效果如下：

当然，有一些优化点：

• 为了让两边不那么空，我们可以让整个容器更宽一点，譬如宽度为父元素的 120%，然后水平居中，这样，两侧的留白就解决了

• 让两行直接贴紧，可以设置一个 margin-bottom

做完这两点优化之后，效果如下：

可以做到任意屏幕宽度下的六边形完美平铺布局：

完整的代码你可以戳这里：CodePen Demo -- Hexagon Layout

配置上色彩变换

有了上述的铺垫后，要实现文章一开头的效果就不难了。

是的，我们要实现这样一个效果：

如何让它们动态的实现颜色变换呢？是给每一个六边形一个单独的颜色，然后进行动画吗？不，借助混合模式，我们可以非常快速的实现不同的颜色值。

首先，我们将上述效果，改成白底黑色六边形色块：

然后，利用父容器剩余的一个伪元素，我们叠加一层渐变层上去：

.wrap {
    position: relative;
    // 代码与上述保持一致

    &::before {
        content: "";
        // ... 实现 shape-outside 功能，代码与上述保持一致
    }
    
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);
    }
}

这样，我们就叠加了一层渐变色彩层在原本的六边形背景之上：

接着，只需要一个混合模式 mix-blend-mode: darken，就能实现六边形色块与上层渐变颜色的融合效果：

.wrap {
    position: relative;
    // 代码与上述保持一致

    &::before {
        content: "";
        // ... 实现 shape-outside 功能，代码与上述保持一致
    }
    
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);
        z-index: 1;
      + mix-blend-mode: darken;
    }
}

效果如下：

好， 我们再给上层的渐变色块，添加一个 filter: hue-rotate() 动画，实现色彩的渐变动画：

.wrap {
    position: relative;
    // 代码与上述保持一致

    &::before {
        content: "";
        // ... 实现 shape-outside 功能，代码与上述保持一致
    }
    
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, #f44336, #ff9800, #ffe607, #09d7c4, #1cbed3, #1d8ae2, #bc24d6);
        z-index: 1;
        mix-blend-mode: darken;
      + animation: change 10s infinite linear;
    }
}
@keyframes change {
    100% {
        filter: hue-rotate(360deg);
    }
}

这样，我们就完美的实现了我们想要的效果：

完整的代码，你可以戳这里：CodePen Demo -- Hexagon Gradient Layout

扩展延伸

当然，有了这个基础图形之后，其实我们可以基于这个图形，去做非常多有意思的效果。

下面我是尝试的一些效果示意，譬如，我们可以将颜色放置在六边形背景的下方，制作这样一种效果：

CodePen Demo -- Hexagon Gradient Layout

配合 mask 的蒙版效果及鼠标定位，我们还能实现这样一种有趣的交互效果：

CodePen Demo -- Hexagon Gradient & MASK Layout

当然，3D 效果也不在话下：

CodePen Demo -- 3D Hexagon Gradient Layout

原文地址：https://www.cnblogs.com/coco1s/p/17005071.html

作者：ChokCoco

（学习视频分享：web前端）

위 내용은 CSS를 사용하여 멋진 육각형 격자 배경 이미지를 구현하는 방법을 단계별로 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!