Question

我想在我的六边形网格中添加几行，理想的情况是网格看起来像这样：http://i.stack.imgur.com/T9Bw1.jpg

我知道我必须改变这一点，但我似乎无法弄明白该做些什么：

.hex {
 width: 17.6%; /* = (100-4) / 5 */
 padding-bottom: 20.3227%; /* =  width / sin(60deg) */
}
.hex:nth-child(9n+6),
.hex:nth-child(9n+7),
.hex:nth-child(9n+8),
.hex:nth-child(9n+9) {
    margin-top: -6.2%;
    margin-bottom: -6.2%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
        -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(9n+6):last-child,
.hex:nth-child(9n+7):last-child,
.hex:nth-child(9n+8):last-child,
.hex:nth-child(9n+9):last-child {
    margin-bottom: 0;
}
.hex:nth-child(9n+10) {
    margin-left: 0.0%;
    clear: left;
}
.hex:nth-child(9n+10) {
    clear: left;
}
.hex:nth-child(9n+2),
.hex:nth-child(9n+ 7) {
    margin-left: -0.4%;
    margin-right: -0.4%;
}
.hex:nth-child(9n+3),
.hex:nth-child(9n+4),
.hex:nth-child(9n+8) {
    margin-right: -0.3%;
}

如何添加行或从我的设计中获得结果？

这是一个JSFiddle：https://jsfiddle.net/marijnroukens/a4xvLeon/1/

提前致谢！

将行添加到六边形网格

0 个答案: