使用css和js动态创建六边形设计
•浏览 1
create hexagon design dynamically using css and js
本问题已经有最佳答案，请猛点这里访问。
这不是任何重复请帮助我
我在这里得到了一些技巧 http://jsfiddle.net/kizu/bhGn4/
我想用 CSS 动态创建它，那该怎么做呢？
每当有任何新条目添加到自动调整的设计中。
我已经努力搜索，我在这里得到了一些关于圆形形状的帮助
如何用 css、javascript 围绕圆圈创建圆圈？
六边形
也是我想要的东西
浏览我创建的这个演示：
.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;
}.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 的形状
希望对您有所帮助！ :)