Comment désaligner l'image de fond dans un calque incliné (CSS)?

Question

J'essaie d'afficher une photo de profil comme ceci/-/(les barres obliques représentent des inclinaisons en utilisant skewX, le trait d'union représente une image d'arrière-plan alignée horizontalement).

Le problème est que ce code biaise aussi l'image de fond:

.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> 

J'ai essayé d'inverser l'arrière-plan biaiser comme ceci:

.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> 

... mais je reçois/[ -]/(l'arrière-plan ne correspond pas aux bords).

J'ai été à toute la journée, s'il vous plaît pouvez-vous m'aider? J'ai le bock du codeur!

Answer 1

Je préfère utiliser un pseudo-élément qui contient l'image de fond. La clé de la solution utilise 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 */ 
}