CSS - ダイヤモンドデザイン

Question

必要な設計

私が正しく取り付けられてデザインを実現して行くだろうか不思議でしたか？

私が考えていた

<div class="diamond1"><img src="images/diamond1.jpg" alt="diamond" /></div> 
<div class="diamond2"><img src="images/diamond2.jpg" alt="diamond" /></div> 
<div class="diamond3"><img src="images/diamond3.jpg" alt="diamond" /></div> 
etc....... 

CSS：

.diamond1{ 
    position:absolute; 
    top:10px; 
    left:40px; 
} 

etc.... 

があり、これを達成するためのより効率的な方法や、それは絶対位置を含む細心の、退屈な、メディアクエリーCSSの仕事でなければならないだろう？

ありがとうございました！

Answer 1

transform: rotateZ(45deg);を使用すると、コンテナを自由に回転させることができます。

その後、画像を整列させるだけです。 I made a small demo-pen for that.

私は相対的に新しいCSSグリッドを使用しました。より古いブラウザとの互換性を望む場合は、別のものを使用したいかもしれません。フレックスボックスを使うよりも、それをやるほうが速かったです。