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

create hexagon design dynamically using css and js

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

这不是任何重复请帮助我

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

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

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

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

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

六边形

也是我想要的东西

enter

相关讨论

我不确定您希望设计如何调整。也许一系列带有编号的六边形的图片可能会有所帮助。 (例如：pic1 有 3 个六边形，pic2 有 4 个六边形，pic3 有 10 个六边形)
这已经在这里得到了回答：stackoverflow.com/questions/10062887/…
@Stuart 是的，我检查过，但我想要不同的方向，正如您在我的问题图片中看到的那样
这个问题在您需要的方向上有一个响应式六边形网格：stackoverflow.com/questions/26114920/…

浏览我创建的这个演示：

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

create hexagon design dynamically using css and js

猜你喜欢