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-grid。如果您希望与旧版浏览器有更好的兼容性，您可能需要使用其他东西。这样做比使用 flexbox 快得多。