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>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
73 artículos que te podrían interesar
Ver más sobre
Deja una respuesta