Come faccio a scordare l'immagine di sfondo in un livello inclinato (CSS)?

Question

Sto tentando di visualizzare una foto del profilo come questa/-/(le barre rappresentano gli slant usando skewX, il trattino rappresenta un'immagine di sfondo allineata orizzontalmente).

Il problema è che questo codice distorce anche l'immagine di sfondo:

.photo { 
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */ 
-webkit-transform: skewX(35deg); /* Safari and Chrome */ 
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
} 

... 

<div class="photo"></div> 

Ho cercato di invertire lo sfondo inclinare in questo modo:

.photo { 
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */ 
-webkit-transform: skewX(35deg); /* Safari and Chrome */ 
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
} 

.photo div { 
transform: skewX(-35deg); 
-ms-transform: skewX(-35deg); /* IE 9 */ 
-webkit-transform: skewX(-35deg); /* Safari and Chrome */ 
width: 100%; 
height: 100%; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
} 

... 

<div class="photo"><div></div></div> 

... ma ho/[ -]/(lo sfondo non si adatta allo spessore).

Sono stato a questo tutto il giorno, per favore puoi aiutarmi? Ho la bacchetta di coder!

Answer 1

Preferisco usare uno pseudo elemento che trattiene l'immagine di sfondo. La chiave per la soluzione sta usando transform-origin:

Example

.photo { 
    transform: skewX(35deg); 
    -ms-transform: skewX(35deg); /* IE 9 */ 
    -webkit-transform: skewX(35deg); /* Safari and Chrome */ 
    width: 100px; 
    height: 92px; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 

    /* new styles */ 
    position: relative; 
    overflow: hidden; 
    -webkit-transform-origin: top left; 
    -ms-transform-origin: top left; 
    transform-origin: top left; 
} 

.photo::before { 
    content: ""; 
    transform: skewX(-35deg); 
    -ms-transform: skewX(-35deg); /* IE 9 */ 
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */ 
    background-image: url('http://placekitten.com/200/200'); 
    background-repeat: no-repeat; 
    background-position: top left; 

    /* new styles */ 
    position: absolute; 
    -webkit-transform-origin: top left; 
    -ms-transform-origin: top left; 
    transform-origin: top left; 
    width: 1000%; /* something ridiculously big */ 
    height: 1000%; /* something ridiculously big */ 
}