关于javascript：使用css和js动态创建六边形设计

create hexagon design dynamically using css and js

本问题已经有最佳答案，请猛点这里访问。

这不是任何重复请帮助我

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

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

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

我已经努力搜索，我在这里得到了一些关于圆形形状的帮助

如何用 css、javascript 围绕圆圈创建圆圈？

六边形

也是我想要的东西

enter

相关讨论

浏览我创建的这个演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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