사선으로 구분된 5개의 대칭 이미지로 배너 만들기

대칭 이미지 배너 에뮬레이션

매력적인 시각적 콘텐츠 시대에 시각적으로 만들기 매력적인 디자인이 필수가 되었습니다. 미학적 우수성을 추구하는 사용자는 Reddit에서 대각선으로 구분되어 대칭적으로 배열된 5개의 이미지가 포함된 눈에 띄는 배너를 발견하게 되었습니다. 이 디자인에서 영감을 받아 사용자는 자신이 선택한 5개의 이미지를 통합하고 텍스트 오버레이를 추가하여 유사한 것을 에뮬레이트하는 여정을 시작했습니다. CSS와 고양이 이미지를 사용하여 몇 가지 실험을 한 후 사용자는 이미지 배치 및 배포 문제에 직면했습니다.

간단한 솔루션

포지셔닝 요소에 의존하는 대신 사용자는 Flexbox를 사용하여 보다 간단한 접근 방식을 채택했습니다. . 5개의 Flexbox 항목이 포함된 컨테이너를 만들고 각 상자에 기울이기 변환을 적용함으로써 복잡한 위치 지정 없이 원하는 효과를 얻을 수 있었습니다.

다음 스니펫은 대칭 이미지 배열을 만드는 방법을 보여줍니다.

.container {
  display: flex;
  height: 150px;
  margin: 0 30px;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(25deg);
  background-image: var(--i);
  background-position: center;
}