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를 사용하는 것보다 빠른 방법이었습니다.