使用css和js动态创建六边形设计

Question

这不重复任何请帮助我

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

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

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

我努力搜索，我在这里获得了圆形的帮助

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

我想要六角形的东西

Answer 1

完成我创建的演示：

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

Answer 2

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

Create Hexagon shapes with pure CSS3

另请参阅CSSTricks上的这些示例。您将了解如何处理这类问题。

Shapes of CSS

希望有所帮助！ ：）

Answer 3

查看this CSS hexagon tutorial，其中介绍了如何创建六边形形状并能够使用calc（）调整它们的大小。

您需要的只是身高的一个值，剩下的就是为您完成的。它也只使用一个类