Parallelogram with transform: skew

index.html

<div class="container">
  <img src="https://picsum.photos/500/300?image=0">
</div>

parallelogram-with-transform-skew.markdown

Parallelogram with transform: skew

A Pen by Shaw on CodePen.

License.

style.scss

.container {
  transform: skew(-15deg);
  overflow: hidden;
}

.container img {
  display: block;
  transform: skew(15deg);
  width: 130%;
  height: auto;
  margin: auto -15%;
}


html { background: #222; height: 100%; display: flex; }
body { margin: auto; }