CSS를 사용하여 5개의 이미지로 대칭 배너를 다시 만드는 방법은 무엇입니까?

5개의 이미지로 대칭적으로 분할된 배너 에뮬레이팅

대각선으로 구분된 5개의 대칭 이미지로 배너를 묘사한 Reddit의 인기 테마는 CSS를 사용하여 유사한 디자인을 에뮬레이션합니다. 이미지가 상자 안에 고르게 분포되고 제한된 배너를 만드는 것이 목표입니다.

CSS 구현

개정된 CSS는 다음과 같은 수정 사항을 적용합니다.

• 레이아웃에 Flexbox를 활용하여 균등한 배포를 보장합니다. 이미지.
• 상자를 비스듬히 기울이고 의사 요소를 사용하여 대각선을 만듭니다.
• 손쉬운 사용자 정의를 위해 CSS 변수를 사용하여 배경 이미지가 할당됩니다.
• 정의합니다 특정 높이와 간격 여백이 있는 컨테이너입니다.

HTML 구조

HTML 구조는 5개의 상자 요소가 있는 컨테이너로 구성되며 각 요소에는 --i CSS 변수를 통해 배경 이미지가 할당됩니다.

다음은 CSS 및 HTML 코드입니다.

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

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

이러한 조정을 구현함으로써 CSS는 이제 대각선으로 분리된 원하는 대칭 배너를 에뮬레이션합니다. 이미지.

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