CODEWITHSUNDEEP
css
Joren
Joren

Reputation: 9915

Skew background image without distortion?

I need to skew the shape of a div that contains a background image, without actually distorting the background image.

Right now I'm using transform: skew(-25deg)

Is it possible to do this without the distortion?

Upvotes: 0

Views: 1487

Answers (1)

Brandon Gano
Brandon Gano

Reputation: 6710

You need to add the background image on a child of the skewed element and then apply an opposite skew to the child. Here's an example:

.parent {
  height: 100px;
  overflow: hidden;
  transform: skew(0.5rad, 0);
  width: 100px;
}
.child {
  background: linear-gradient(to right, red 0%, blue 100%);
  height: 100%;
  transform: skew(-0.5rad, 0);
  width: 100%;
}
<div class="parent">
  <div class="child">
    etc.
  </div>
</div>

Upvotes: 7

Related Questions