CSS를 사용하여 이미지 갤러리의 끝 부분만 기울이는 방법은 무엇입니까?

비뚤어진 여러 이미지의 끝 부분을 풀기

이전에는 여러 이미지를 비뚤어지게 하는 방법을 고안하여 만족스러운 결과를 얻었습니다. . 하지만 용기의 안쪽 부분은 기울어지지 않은 채 왼쪽 끝(상자 1)과 오른쪽 끝(상자 6)만 비뚤어지게 만드는 방법이 과제로 남아 있습니다.

해결책

이 문제를 해결하기 위해 세련된 CSS 솔루션이 개발되었습니다.

 --s: 50px; /<em> 기울어진 부분 제어 </em>/<p>display:grid;<br>height:350px;<br>gap:8px;<br>grid-auto-flow:column;<br> 장소 항목: center;<br>}<br>.gallery > img {<br> 너비: 0;<br> 최소 너비: calc(100% var(--s));<br> 높이: 0;<br> 최소 높이: 100%;<br> 객체- 적합: 덮개;<br> 클립 경로: 다각형(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);<br> 커서: 포인터;<br> 전환: .5s;<br>}<br>.gallery > img:hover {<br> 너비: 15vw; <br>}<br>.gallery > img:첫번째 자식 {<br> 최소 너비: calc(100% var(--s)/2);<br> 장소 자체: 시작;<br> 클립 경로: 다각형(0 0,100% 0, calc(100% - var(--s)) 100%,0 100%);<br>}<br>.gallery > img:last-child {<br> 최소 너비: calc(100% var(--s)/2);<br> place-self: end;<br> 클립 경로: 다각형(var(--s) ) 0,100% 0,100% 100%,0 100%);<br>}</p><p>본문 {<br> 여백: 0;<br> 최소 높이: 100vh;<br> 디스플레이: 그리드;<br> 정렬 콘텐츠: 센터;<br> 배경: #ECD078;<br>}</p>

이 코드는 6개의 이미지로 구성된 CSS 그리드를 정의합니다. 그리드는 이미지 사이의 간격과 이미지를 그리드 셀 내 중앙에 배치하는 장소 항목 속성으로 구성됩니다. 각 이미지에는 너비 0, 최소 너비 100%, 변수 --s 값, 높이 0, 최소 높이 100%가 지정됩니다. 개체 맞춤 속성이 포함되도록 설정되어 이미지가 가로 세로 비율을 유지하면서 사용 가능한 공간을 채우도록 합니다.

클립 경로 속성은 기울어진 모양을 만드는 데 사용됩니다. 각 이미지에 대해 다각형은 모양의 네 면을 정의하는 네 개의 점을 지정합니다. --s 값은 컨테이너의 시작과 끝 부분에서 기울어진 부분의 너비를 제어하여 모양을 미세 조정할 수 있습니다.

:hover 스타일 규칙은 마우스를 올리면 이미지에 적용되며, 너비를 더 두드러지게 만듭니다. :first-child 및 :last-child 스타일은 첫 번째 이미지와 마지막 이미지의 클립 경로를 조정하여 컨테이너 가장자리에 원하는 기울어진 효과를 생성합니다.

이 솔루션은 다음과 같은 몇 가지 장점을 제공합니다. 반응형 디자인, 이미지의 가로 세로 비율을 유지하고 기울어진 모양의 모양을 제어할 수 있습니다.

위 내용은 CSS를 사용하여 이미지 갤러리의 끝 부분만 기울이는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!