How to crop a background image in a skewed layer (CSS)?

Question

I am trying to display a profile photo similar to this / - / (slashes are inclinations using skewX, the hyphen is the horizontal alignment of the background image).

The problem is that this code also distorts the background image:

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

I tried to change the focus like this:

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

... but I get / [-] / (the background doesn't fit the meaning with the stand).

I was here all day, please help me? I have a bock encoder!

Answer 1

I would rather use a pseudo-element containing a background image. The key to the solution is 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 */ }