Javascript 使用css和js动态创建六边形设计

这不是任何副本，请帮助我

我有点小把戏

我想用

CSS

动态创建它，那么怎么做呢

当任何新条目添加到自动调整的设计中时

我一直在努力寻找，在这里我得到了一些关于圆形的帮助

和我想要的六边形一样

---

浏览我创建的演示：

.hexagon{
宽度：100px；
高度：55px；
背景：红色；
位置：绝对位置；
}
.hexagon:以前{
内容：“；
位置：绝对位置；
顶部：-25px；
左：0；
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框底部：25px纯红；
}
.六边形：之后{
内容：“；
位置：绝对位置；
底部：-25px；
左：0；
宽度：0；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框顶部：25px纯红；
}
.hex1{
顶部：20px；
左：0px；
}
.hex2{
顶部：20px；
左：110像素；
}
.hex3{
顶部：20px；
左：220px；
}
.hex4{
顶部：110px；
左：55px；
}
.hex5{
顶部：110px；
左：165px；
}
.hex6{
顶部：110px；
左：275px；
}

---

关于使用CSS创建六边形，这里有一个很棒的教程。查看开始处的分步指南

也可以在cstrick上看到这个例子。你会知道如何处理这类问题

希望有帮助！：）

看看哪个描述了如何创建六边形形状，并能够使用calc（）调整它们的大小

---

您所需要的只是高度的一个值，其余的都为您完成。它也只使用一个类

我不确定您希望设计如何调整。也许一系列带有数字六边形的图片会有所帮助。（例如：pic1有3个六边形，pic2有4个六边形，pic3有10个六边形）这里已经回答了：@Stuart是的，我检查过了，但我想要不同的方向，正如你在我的问题图片中看到的那样。这个问题的特点是在你需要的方向上有一个六边形响应网格：谢谢hari，在这里，如果我要添加另外两个或三个形状，那么需要为这些形状创建css？您可以添加Jquery/Javascript来动态填充此逻辑。因此，此javascript将动态执行布局操作。所以基本上它就像一个插件。所以不需要写这么大的css代码（假设你的布局包含1000个六边形，它将是1000个不同的css）。确切地说，我在这里想要同样的东西，如果你能帮助我，我会欣赏你的答案，但如果可能的话，请尝试使它成为动态Superb buddy，它太棒了