Wie kann ich das Hintergrundbild in der schiefen Ebene (CSS) entfernen?

Question

Ich versuche, ein Profilfoto wie folgt darzustellen/-/(die Schrägstriche stellen Schrägstriche dar, die skewX verwenden, der Bindestrich stellt ein horizontal ausgerichtetes Hintergrundbild dar).

Das Problem ist, dass dieser Code auch das Hintergrundbild skews:

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

Ich habe versucht, den Hintergrund schräg wie folgt zu umkehren:

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

... aber ich bekomme/[ -]/(der Hintergrund passt nicht bündig zu den Schrägen).

Ich war den ganzen Tag dabei, bitte können Sie mir helfen? Ich habe Coders Bock!

Answer 1

Ich würde lieber ein Pseudo-Element verwenden, das das Hintergrundbild enthält. Der Schlüssel zur Lösung wird mit 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 */ 
}