배경 이미지에 영향을주지 않고 div에 대한 변형을 설정하는 방법은 무엇입니까?

Question

평면 (사실) 배경 이미지로 평행 사변형 (Parallelogram) 개체를 만들고 싶습니다.

HTML :

<div class="q-item"></div> 

CSS :

.q-item { 
    width: 180px; 
    height: 132px; 
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 13px 1px; 
    float: left; 
    margin-left: 58px; 
    padding-right: 1%; 
    border: 2px solid #1D2A3D; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
} 

참조하십시오 내 샘플 jsfiddle

에서이에서이 요소와 화이트 아웃 효과를 객체의 시행없이 div 변환을 설정하는 방법 배경?

Answer 1

나는 의사 요소 ::before을 추가하고 background-image을 해당 의사 요소로 이동하고 원래의 왜곡을 반대로하기 위해 역 스큐를 적용하여 성공했습니다.

이것은 sitepoint.com의 솔루션을 기반으로합니다.

.q-item { 
    width: 180px; 
    height: 132px; 
    float: left; 
    margin-left: 58px; 
    padding-right: 1%; 
    border: 2px solid #1D2A3D; 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -ms-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    transform: skew(-20deg); 
} 

.q-item::before { 
    content:""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 33px 1px; 
    -webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -ms-transform: skew(20deg); 
    -o-transform: skew(20deg); 
    transform: skew(20deg); 
} 

WORKING EXAMPLE