六边形图案 CSS 涂鸦答案

【问题标题】：Hexagon pattern CSS Doodle六边形图案 CSS 涂鸦
【发布时间】：2019-11-14 10:57:54
【问题描述】：

我使用 CSS Doodle 制作了带有这种六边形图案的堆栈。问题是：我想让六边形更小 1.5-2 倍并且更对称（现在它就像被 X 轴拉伸了一点），但是必须保存改变视口时的响应。我试图结合许多价值观，但这是我能够做到的最终版本。这里有一个codepen和code：

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;
  }

【问题讨论】：

为什么要轮换？可以分享一下最终结果吗？

标签： css css-doodle

【解决方案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

【讨论】：

【解决方案2】：

我想要这样的最终结果https://codepen.io/nosovk/pen/yLLEWLY

【讨论】：

使用空代码块可以解决此要求：“指向 codepen.io 的链接必须附有代码。请使用代码工具栏按钮或 CTRL+K 键盘快捷键将所有代码缩进 4 个空格。如需更多编辑帮助，请单击 [?] 工具栏图标。”请修复它。