[웹디자인] 마름모꼴 이미지

html

<div class="diamond">
  <img src="https://placeimg.com/300/300/any" >
</div>

css

.diamond {
  width: 300px;
  height: 300px;
  transform: rotate(45deg);
  overflow: hidden;
}
.diamond > img {
  max-width: 100%;
  min-width: 100%;
  transform: rotate(-45deg) scale(1.5);
  position: relative;
}

• 부모요소를 45도 회전
• max-width,min-width를 100%로 주어 이미지 전체 꽉 채우기
• 자식요소를 다시 반대로 45도 회전하고 scale로 여백 채우기
• 자식요소 position을 relative로 하고 중심으로 맞추기

유노코딩