使用CSS和JS动态创建六边形设计

Question

使用CSS和JS动态创建六边形设计

javascripthtmlcsscss-shapes

7

这不是任何问题的重复，请帮帮我

我在这里得到了一些诀窍http://jsfiddle.net/kizu/bhGn4/

我想用CSS动态创建它，那么该怎么做呢？

每当添加新条目以设计时，它会自动调整。

我已经努力搜索并获得了一些关于圆圈形状的帮助

如何使用CSS、JavaScript创建圆圈周围的圆圈?

同样的东西我想要六边形

enter image description here

- anytime

我不确定您希望设计如何调整。也许一系列带有编号六边形的图片可以提供帮助。(例如：pic1有3个六边形，pic2有4个六边形，pic3有10个六边形) - Tibos

这个问题已经在这里得到了回答：https://dev59.com/HGkw5IYBdhLWcg3wMHyn - Stuart

@Stuart 是的，我检查过了，但是我想要不同的方向，正如你可以在我的问题图片中看到的那样。 - anytime

这个问题展示了一个响应式六边形网格，可以按照你需要的方向进行布局：https://dev59.com/DV8e5IYBdhLWcg3wEXJi - web-tiki

3个回答

0

这里有一个非常棒的教程，介绍如何使用CSS创建六边形形状。请查看开头的逐步指南。

使用纯CSS3创建六边形形状

同时，您还可以在CSSTricks上查看这些示例。这将让您了解如何处理这类问题。

CSS形状

希望这能帮到您！ :)

- maxxon15

太棒了伙计，真是太棒了。 - Er.KT

0

看一下这个CSS六边形教程，它描述了如何使用calc()创建六边形形状并能够调整大小。

你只需要一个高度值，剩下的都会为你完成。它还只使用了一个类。

- KennyV

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hari · Accepted Answer

请浏览我创建的演示：

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: absolute;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}
.hex1 {
  top: 20px;
  left: 0px;
}
.hex2 {
  top: 20px;
  left: 110px;
}
.hex3 {
  top: 20px;
  left: 220px;
}
.hex4 {
  top: 110px;
  left: 55px;
}
.hex5 {
  top: 110px;
  left: 165px;
}
.hex6 {
  top: 110px;
  left: 275px;
}

<div style="position:absolute; top:30px">
  <div class="hexagon hex1"></div>
  <div class="hexagon hex2"></div>
  <div class="hexagon hex3"></div>
  <div class="hexagon hex4"></div>
  <div class="hexagon hex5"></div>
  <div class="hexagon hex6"></div>
</div>