Q:

CSS Parallelogram on one side with image inside

I'm trying to make this form using only CSS (the white form):

But my css is making a Parallelogram and I want to make just one side and it deforms also my image, I just want to deform only the container and leave my image with its original form plus my css it not be.
Here's my html
<div class="header__logo">
    <img src="images/logo.jpg" alt="Skihouse">
</div>

And my css:
.header__logo {
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
  background: red;
  padding: 1em;
  background-color: #FFF; }

Here's the result on how it's beheaving:

Hope you guys guide me, thanks in advance for your time!
Regards!

A:

Instead of skewing the logo at all, just save your image on the white background color and use an ::after (or ::before if you prefer) to draw the angle on the right side.
http://jsfiddle.net/bc2mcpst/

