CSS Transform to Skew the Shape to a Trapezium

CSS Transform Skew

CSS:

#box {
    width: 200px;
    height: 200px;
    background: black;
    position: relative;
    -webkit-transition: all 300ms ease-in;
}
#box:hover {
    -webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
    display: block;
    content: "\0020";
    color: transparent;
    width: 211px;
    height: 45px;
    background: white;
    position: absolute;
    left: 1px;
    bottom: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}
#box:before {
    bottom: auto;
    top: -20px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
}

HTML:

<div id=box></div>

Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/

This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/

And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/

How to transform skew only towards bottom corners?

You can start with something like this, clean and simple without multiple divs.

#trapezium {

  width: 200px;

  height: 100px;

  margin: 50px;

  transform: perspective(100px) rotateX(-45deg);

  background-color: gray;

}

<div id='trapezium'></div>

How to draw a trapezium/trapezoid with css3?

You can use some CSS like this:

#trapezoid {

    border-bottom: 100px solid red;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    height: 0;

    width: 100px;

}

<div id="trapezoid"></div>

How can I keep my CSS transform (rotate & skew origin) from moving a few pixels to the right?

You were missing "transform" in -webkit-transform-origin !

$('div.book').click(function() {

  $(this).toggleClass('open');

});

div.bg {

  background-color: #00adef;

  display: inline-block

}

.book {

  transition: all 2s;

  width: 145px;

  height: 200px;

  background-color: #333;

  -webkit-transform-origin: left;

}

.book.open {

  -webkit-transform: rotateY(-90deg) skewY(-45deg);

  -webkit-transform-origin: left;

  transform-origin: left;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='bg'>

  <div class='book'>

  </div>

</div>

can i obtain this shape with css transform?

body{
    perspective: 50em;
}
div {
    width: 500px;
    height: 500px;
    background:black;
    transform:rotateX(60deg);
    margin:100px auto;
}

Demo: http://jsfiddle.net/kf6oow6f/2/

The perspective property should be on the parent of the div, which is body in this demo. The value 50em can be adjusted as needed.

Note also that (unlike a previous answer), using this transform allows you to insert content that is also identically distorted. Demo: http://jsfiddle.net/kf6oow6f/3/

CSS3 matrix3d rectangle to trapezoid transformation

-webkit-perspective doesn't work in Chrome yet (just Safari), so this won't work (try your code in Safari). Also 3D transforms in Chrome, in general, are a bit iffy, and don't combine well with gradients, for one.

Also rotate3d(1, 0, 0, 90deg) works just as well as a matrix to accomplish what you're doing. The matrix notation is just a short way of combining 3D rotate, skew, move and origin into a single array. Since you're only rotating around the x-axis, you don't need to go to these lengths.

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

Is exactly what you need.

Update:
Here is a link to a jsfiddle with exactly what you are looking for that works in both chrome and safari. Please note that its important to specify that the transform origin for the flip is the same as the origin for the perspective. Webkit-perspective origin specifies where the "camera" is in 3D space relative to any 3d transforms and it's easy to get unintuitive results if you're not careful.

2nd Update:
Perspective is now supported in all edge browsers (although firefox's anti-aliasing has little to recommend it (and needs -moz obviously))

3rd Update:
Updated the fiddle for cross browser for Firefox, IE and unprefixed.

Responsive CSS Trapezoid Shape

There are many different ways to create the trapezoid shape and each have their own benefits and downfalls.

Below is a comprehensive list of the various ways and all should be responsive.

CSS Border

The most well supported of all the answers. It is supportwed way back to IE and across all other browsers both on the desktop and mobile.

border - CSS | MDN

#trapezoid {

  border-left: 20vw solid red;

  border-top: 5vw solid transparent;

  border-bottom: 5vw solid transparent;

  width: 0;

  height: 10vw;

}

<div id="trapezoid"></div>

Overlay trapezium shape on DIV

as @markE mentioned a good way to achieve this is using skew

Use position:relative in .wrap and position:absolute in the parallelogram div to achieve the overlay effect (using the rgba in background property)

Note: this is a parallelogram, not a trapezium - this might help you on future searches

*,

*::before,

*::after {

  box-sizing: border-box

}

body {

  margin: 0

}

.wrap {

  position: relative;

  border: 5px solid black;

  height: 500px;

  width: 100%;

  background: url("//lorempixel.com/1200/600")

}

.parallelogram {

  position: absolute;

  right: 0px;

  top: 100px;

  width: 350px;

  height: 250px;

  background: rgba(255, 255, 255, .5);

  border: solid black;

  border-width: 5px 0 5px 5px;

  transform: skew(0, -15deg);

}

span {

  display: block;

  transform: skew(0, 15deg);

  margin: 70px 30px 0;

}

<div class="wrap">

  <div class="parallelogram"><span>title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 </span>

  </div>

</div>