CSS Transform Skew

css css-transforms css-shapes skew

realph · Mar 14, 2011 · Viewed 58.9k times · Source

Does anyone know how to achieve skew like this:

Using CSS's new transform property?

As you can see I'm trying to skew both corners, anyone know if this is possible?

Answer

.red.box {
  background-color: red;
  transform: perspective( 600px ) rotateY( 45deg );
}

Then HTML:

<div class="box red"></div>