title: How to create different shape of trapezoid images using css?
body: <p>I am working on a website where I need to use different trapezoid shape of images. Here I am giving you that image in link:</p>
  
  <p>Thanks Riccardo, Appreciate your effort.</p>
  
  <p>Following are the 2 points I still need to sort it out.</p>
  
  <p>This is the image that I got after implement your code.</p>
  
  <p><img src="https://i.stack.imgur.com/HyBjP.jpg" alt="enter image description here"></p>
  
  <ol>
  <li><p>Shape of the site will be skewed but not the image. The current shape is perfect but all images are also got skewed along with the shape which I don't want. I want all the images not to be shown as skewed as it is showing right now. So need guidance on that particular issue.</p></li>
  <li><p>And the 2nd most important thing is about the total structure of the site. My site will be in 100% but in Container, you have given fixed height and width but I want the height and the width will be 100%.</p></li>
  </ol>
  
  <p>I have tried by putting 100% width instead of current pixels but it all messed up. Here I am posting my given css. The left part of the shape is fixed, its not increasing while I am giving the widhth 30%. And the right side shape is moving far right and in between middle and right shape the container backgroup is shown which is in orange color as per the css code. And eventually I messed up all things, Here is thislink of that:</p>
  
  <p>One more thing I would like to add is that Can it be possible to put 100% height on that container. Because whenever I tried to put height 100%, the whole structure get vanished. So any solution in that particular height point?</p>
  
  <p>The both image issue and width height 100% issue are important for the website to function. So need your guidance on this.</p>