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

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

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

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

使用纯 CSS3 创建六边形形状

还可以在 CSSTricks 上查看此示例。您将了解如何解决此类问题。

CSS 的形状

希望对您有所帮助！ :)

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/269184.html

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

create hexagon design dynamically using css and js

相关推荐

发表回复