六角形の画像奇数/偶数CSS

Question

だから私は六角形の画像を持っており、ng-repeatを実行すると次のようになります。

コンテナの幅は448pxなければならず、画像が応答する必要があります。 これは私が試みたものです。

CodePen

HTML

<div class="hexagons"> 
    <img src="images/hexagon5.png" alt=""> 
    <img src="images/hexagon6.png" alt=""> 
    <img src="images/hexagon5.png" alt=""> 
    <img src="images/hexagon6.png" alt=""> 
</div> 

CSS

.hexagons { 
    max-width: 448px; 
    height: 800px; 
    position: relative; 
} 
.hexagons img:nth-child(even) { 
    position: relative; 
    top: -115px; 
    left: 193px; 
} 
.hexagons img:nth-child(odd) { 
    position: relative; 
} 

結果：

誰かがこれで私を導くことができますか？

Answer 1

これは、例えば、単に六角の半分の高さによって各偶数の要素をオフセットすることによって達成することができます。

HTML

<div class="hexagons"> 
    <div class="hex"></div> 
    <div class="hex"></div> 
    <div class="hex"></div> 
    <div class="hex"></div> 
</div> 

CSS

.hexagons { 
    width: 300px; 
} 

.hex { 
    float: left; 
    width: 150px; 
    height: 100px; 
} 

.hex:nth-child(2n) { /* .hex:nth-child(even) works too! */ 
    position: relative; 
    top: 50px; /* half of 100px */ 
} 

ライブ例： http://codepen.io/veksen/pen/GjYKBJ

ペンが正しいed：http://codepen.io/veksen/pen/QKkLJg?editors=1100
イメージはブロック要素なので、ブロックとして設定して浮動させる必要があることに注意してください。コンテナは、2つの画像（256ピクセル幅）を収容するのに十分な幅がなければなりません。偶数六角形も左に移動する必要がありました。

応答のための更新：http://codepen.io/veksen/pen/XjxWJo?editors=1100
は割合でビットを再生するが、あなたのアイデアを得ます！