Contenedores torcidos con CSS3

En este artículo vamos a aprender como crear divs o contenedores torcidos con CSS3 rompiendo la estética habitual del diseño de las páginas Web.

Para conseguir el efecto de la imagen tan solo deberemos añadir en nuestra página los siguientes estilos CSS:

div {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    padding:5px;
    margin-left:20px;
}
div#div2 {
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -moz-transform:rotate(30deg); /* Firefox */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    -o-transform:rotate(30deg); /* Opera */
    padding:5px;
}

Y luego en el <body>:

<div>Este contenedor esta recto.</div>
<div id="div2">Este contenedor esta torcido.</div>

Ver el ejemplo en funcionamiento