CSS를 사용하여 기울어진 상자에서 완벽하게 중앙에 위치한 이미지를 만드는 방법은 무엇입니까?

사선을 사용하여 대칭적인 이미지 만들기

웹 디자인에서는 시선을 사로잡고 시각적으로 매력적인 비주얼을 만드는 것이 무엇보다 중요합니다. 인기를 얻은 기술 중 하나는 Reddit에서 우연히 발견한 눈에 띄는 배너와 유사한 대각선으로 구분된 이미지의 대칭 배열입니다.

이 효과를 얻기 위해 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 구조에 적용할 경우:

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

결과적으로 완벽하게 중앙에 배치되고 간격이 균등한 이미지 집합이 생성됩니다. 기울어진 상자 안에서 매혹적이고 균형 잡힌 시각 효과를 만들어냅니다.

위 내용은 CSS를 사용하여 기울어진 상자에서 완벽하게 중앙에 위치한 이미지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!