In your specific case, you require a CSS3 transform to skew only one side of an image while maintaining a transparent skewed area. 견고한 경계를 사용한 제공된 솔루션은이 효과를 효과적으로 달성하지 못합니다.

솔루션 : 반대 스 태우

.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(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

. 예를 들어, 부모 컨테이너에 20 도로 기울어 진 경우, 중첩 (이미지) Div에 -20 도의 비뚤어진 값을 제공하십시오. 오버플로 : 숨겨진; } #parallelogram { 너비 : 150px; 높이 : 100px; 여백 : 0 0 -20px; 변환 : SKEW (20DEG); 배경 : 빨간색; 오버플로 : 숨겨진; 위치 : 상대; } .Image { 배경 : URL (http://placekitten.com/301/301); 위치 : 절대; 상단 : -30px; 왼쪽 : -30px; 오른쪽 : -30px; 하단 : -30px; 변환 : SKEW (-20DEG); }

이 코드는 빨간색 평행 사변형 컨테이너에 20도 스 태우를 만듭니다. 그 내부에는 이미지가 -20 도로 중첩 된 div에 배치되어 부모 컨테이너에 적용된 비대칭을 효과적으로 반전시키고 그 뒤에 투명한 왜곡 된 영역을 드러냅니다.