Question

我已经使用CSS Doodle将这个六边形图案堆叠在一起。问题是：我想使六边形小1.5到2倍并且更对称（现在好像有点被X轴拉伸了），但是必须保存更改视口时的响应性。我试图结合许多价值观，但这是我所能做的最终版本。这里有一个Codepen和代码：

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

Answer 2

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

六角形CSS涂鸦

2 个答案: