实现炫酷六边形网格背景图

绘制六边形方法

1. 使用border实现六边形

实现思路

使用border实现六边形，主要在于上下两个三角形叠加中间一个矩形，可利用元素的两个伪元素实现上下两个三角形，从而让这个元素看起来像一个六边形。

代码实现绘制六边形

<div class="hexagon"></div>


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

.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 倍。

2. 使用clip-path实现六边形

简介

clip-path属性使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏，可以指定一些特定形状。

使用示例

// 圆形裁剪
-webkit-clip-path: circle(50% at 50% 50%);

// 椭圆裁剪
-webkit-clip-path: ellipse(25% 40% at 50% 50%);

// 矩形裁剪
-webkit-clip-path: inset(5% 20% 15% 10%);

// 三角形裁剪
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

// 菱形裁剪
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

// 梯形裁剪
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

// 平行四边形裁剪
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

// 五边形裁剪
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

// 六边形裁剪
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

// 七边形裁剪
-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);

// 八边形裁剪
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);              

// 左箭头裁剪
-webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

// 右箭头裁剪
-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

// 五角星裁剪
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

// 十字架裁剪
-webkit-clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);

// 叉号裁剪
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

// 对话框裁剪
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);                    

代码实现绘制六边形

<div class="clippath"></div>

.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: 300px auto;
 }

效果查看

炫酷六边形网格背景图

注意事项

1. 使用shape-outside实现隔行错位布局 ，本质是生成几何图形并且裁剪掉其几何图形之外周围的区域，让内容能排列在这些被裁剪区域之内
2. 实现渐变，需要在父容器的伪元素上叠加一层渐变上去，需要添加mix-blend-mode: darken属性，该属性为混合模式即可以将多个图层混合在一起，创建混合的视觉效果，上述darken在混合两种颜色的时，会分别比较两个颜色的RGB分量，取RGB值比较暗的（小值），生成新的RGB。
3. 实现动态渐变动画，用到的属性为filter: hue-rotate(360deg),该属性表示色调旋转滤镜(hue-rotate)，上述表示一个色调360°不断旋转

代码实现

 <ul class="wrap"></ul>
 
 // 创建多个li
 <script>
    for(var i=0;i<=700;i++){
        var ele = document.createElement('li')
        document.getElementsByClassName('wrap')[0].appendChild(ele)
    }
</script>

样式实现

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  background: #000;
}

:root {
  --s: 50px; /* size  */
  --m: 0.4px; /* margin */
  --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
}

.wrap {
  position: relative;
  margin: auto;
  flex: 0 0 120%;
  transform: translate(-10%, -10%);
  height: 120%;
  font-size: 0;

  &::before {
    content: "";
    height: 100%;
    width: calc((var(--s) / 2) + calc(var(--m) / 2));
    shape-outside: repeating-linear-gradient(
      transparent 0,
      transparent 80px,
      #000 80px,
      #000 var(--f)
    );
    float: left;
  }

  &::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 5s infinite linear;
  }
}

li {
  position: relative;
  width: 50px;
  height: calc(var(--s) * 1.1547);
  background: #000;
  flex: 0 0 auto;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  margin: var(--m);
  margin-bottom: calc(var(--m) - var(--s) * 0.2885);
  display: inline-block;
  z-index: 2;
}

@keyframes change {
  100% {
    filter: hue-rotate(360deg);
  }
}

效果显示