CSS를 사용하여 대각선으로 대칭적인 이미지 배열을 만드는 방법은 무엇입니까?

대칭으로 분리된 대각선의 이미지

소개

사선으로 분리된 대칭적인 이미지 배열을 만드는 것은 반복되는 디자인 패턴입니다 웹 및 그래픽 디자인에서 자주 발견됩니다. 이 튜토리얼에서는 CSS를 사용하여 이 효과를 얻는 방법을 탐색하고, 이미지가 컨테이너 외부에 남아 있고 불균등하게 배포되는 이전 접근 방식에서 직면한 문제를 해결합니다.

간단한 CSS 솔루션

위치 지정 요소를 사용하고 코드를 단순화하면 Flexbox와 배경 위치의 조합을 사용할 수 있습니다. 개선된 CSS는 다음과 같습니다.

.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;
}

HTML 구조

이미지 표시를 위한 HTML 구조도 단순화되었습니다.

<div class="container">
  <div class="box">

설명

이 단순화된 접근 방식은 Flexbox를 활용하여 컨테이너 내에 상자를 고르게 배포합니다. 각 상자에는 --i CSS 변수를 사용하여 설정된 배경 이미지가 제공됩니다. 상자의 기울이기 변환은 대각선 효과를 만듭니다.

이점

향상된 CSS 및 HTML 구조는 다음과 같은 여러 가지 이점을 제공합니다.

• 단순화 code
• 배경 위치를 이용한 간편한 이미지 위치 지정
• 컨테이너 내 균일한 이미지 분포
• DOM 요소 감소 및 위치 지정으로 성능 향상

위 내용은 CSS를 사용하여 대각선으로 대칭적인 이미지 배열을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!