CSS3 변환을 사용하여 이미지의 한쪽 면만 기울일 수 있는 방법은 무엇입니까?

CSS3 변환으로 한쪽을 기울이기

CSS3에서 이미지를 기울이는 것은 간단한 작업이지만 한쪽만 기울이는 것은 조금 더 어려울 수 있습니다.

테두리 속성을 사용하여 제공되는 솔루션은 단색이 아닌 이미지 배경이 있는 경우 적합하지 않습니다. 또한 요소의 한쪽만 기울이는 것이 아니라 양쪽을 기울이는 것이 제한될 수 있습니다.

한쪽만 기울이려면 다음 접근 방식을 고려하세요.

이미지 기울어짐 해제

중첩된 div 요소를 사용하여 이미지를 보관하세요. 중첩된 div에 반대 기울기 값을 적용하여 상위에 적용된 기울기를 상쇄합니다.

예제 코드:

<div class="container">
  <div>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

이 설정은 효과적으로 기울기만 이미지의 한 면은 그대로 두고 다른 면은 직선으로 둡니다. 오버플로로 인해 기울어진 영역은 투명하게 유지됩니다. 상위 컨테이너의 숨겨진 속성