css - 六边形图案 CSS 涂鸦

Question

我使用 CSS Doodle 得到了这个六边形图案的堆栈。问题是:我想让六边形缩小 1.5-2 倍并且更加对称(现在它就像被 X 轴拉伸(stretch)了一点)，但是必须保存视口(viewport)更改时的响应。我尝试结合许多值，但这是我能够做到的最终版本。这里有一个代码笔和代码:

https://codepen.io/mepuduah/pen/dyyjRqP

:doodle {
  position: absolute;
  @grid: 1000 / 102vw;
  height: 103vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  top: -3%;
  left: -2%;
}

  @shape: hexagon;
  background: #000;
  @size: 69% 42%;
  -webkit-transition: 2s;
  transform: rotate(45deg) scaleY(2) scaleX(2);
  margin: 45% 55%;
  :hover { 
    background: #fff;
    transition: 0.5s easy-in;
  }

Answer 1

很难将 scaleX/Y 和 width/height 的比例保持在一起。但是还有另一种方法可以通过使用 translate 来缩小六边形之间的间隙:

--x: calc((@col() - 1) * -8%); 
--y: calc((@row() - 1) * -20%);
--xx: 0;

@row(even) { 
  --xx: 47%; 
}

transform: 
  translate(var(--x), var(--y)) 
  translateX(var(--xx));

如果你想做旋转，你可以改变 :container 元素:

:container {
  transform: scale(1.5) rotate(-15deg); 
}

另请注意，32x32 是 css-doodle 可以制作的最大尺寸。在 CodePen 上查看:

https://codepen.io/yuanchuan/pen/qBBMMGa