How Can I Skew Only One Side of an Image Using CSS3 Transforms?

Skewing One Side with CSS3 Transform

Skewing an image in CSS3 is a straightforward task, but skewing only one side can be a bit more challenging.

The provided solution using border properties is not suitable when you have an image background instead of a solid color. Additionally, skewing both sides of the element instead of just one can be limiting.

To achieve a one-sided skew, consider this approach:

Unskewing the Image

Use a nested div element to hold the image. Apply an opposite skew value to the nested div to counteract the skew applied to the parent.

Example Code:

<div class="container">
  <div>
<pre class="brush:php;toolbar:false">.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(image.jpg); /* Replace with your image URL */
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  transform: skew(-20deg);
}

This setup effectively skews only one side of the image, leaving the other side straight. The skewed area remains transparent due to the overflow: hidden property on the parent container.