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

这是不重复的任何请帮我创建六边形设计，使用动态CSS和JS

我来到这里的一些技巧http://jsfiddle.net/kizu/bhGn4/

我想与CSS动态创建，所以该怎么做？

每当有新的条目添加到设计自动调整。

我已努力寻找和我得到了圆形一些帮助，在这里

How to create circles around a circle with css, javascript?

一样东西，我想六角

enter image description here

来源

2013-09-25 anytime

我不确定你想如何调整设计。编号为六角形的图片序列可能会有所帮助。（例如：pic1有3个六边形，pic2有4个六边形，pic3有10个六边形） – Tibos

这已经在这里解答：http://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3 – Stuart

@斯图尔特是的，我检查了，但我想在不同的方向，因为你可以看到我的问题的图像 – anytime

通过这个演示我已创建：

.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>

来源

2013-09-26 12:28:12 Hari

感谢hari，这里如果我将添加另外两个或三个形状，那么需要为这些创建css？ – anytime

和精湛的工作伙伴 – anytime

您可以添加Jquery/Javascript来动态填充此逻辑。所以这个JavaScript会动态地进行布局操作。所以基本上它就像一个插件。所以不需要编写这么大的CSS代码（假设你的布局包含1000个六边形，它将会是1000个不同的CSS）。 – Hari