关于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;
  borderleft: 50px solid transparent;
  borderright: 50px solid transparent;
  borderbottom: 25px solid red;
}
.hexagon:after {
  content:"";
  position: absolute;
  bottom: 25px;
  left: 0;
  width: 0;
  height: 0;
  borderleft: 50px solid transparent;
  borderright: 50px solid transparent;
  bordertop: 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;
}
1
 


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

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


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

使用纯 CSS3 创建六边形形状

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

CSS 的形状

希望对您有所帮助! :)


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

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论