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網格。如果您希望與舊版瀏覽器更好地兼容，則可能需要使用其他功能。與flexbox相比，這樣做的速度更快。