Search code examples
htmlcsstransformskew

Display image as it is with Transform

How do you use transform in CSS to display the image like the 2nd pic? For the 1st pic I used skewY but that is not how I want the image to be displayed.

enter image description here

enter image description here

Solution

  • To clip a photo, you should use the CSS property clip-path.

    clip-path: polygon(0% 0%, 100% 0, 100% 69%, 0 100%);

    You can create your own shape using Clippy.

    <html>
  <body>
     <img style="clip-path: polygon(0% 0%, 100% 0, 100% 69%, 0 100%);" src="https://images.unsplash.com/photo-1612714506270-cf18a3ccb674?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" width="40%" height="40%">
  </body>
</html>