Páginas inclinadas con CSS3

En una de las últimas web que he programado decidí implementar, usando CSS3, que las páginas no fueran rectas sino que acabarán oblicuamente.
Una imagen vale más que mil palabras:

La gracia de esta técnica es no hacerlo con imágenes de fondo obviamente.
Para conseguirlo, basta con rotar los contenedores en un sentido, y su contenido en otro. Si además queremos hacer que un contenedor vaya en un sentido y el siguiente contenedor en otro se puede conseguir jugando con los valores del body y la posición de los contenedores teniendo en cuenta si son pares o impares.

Por ejemplo, con esta estructura:

<body>
	<div class="sk">
		<section id="seccion1" class="skContenido">
			<!-- Contenido del bloque 1 -->
		</section>
	</div>
	<div class="sk">
		<section id="seccion2" class="skContenido">
			<!-- Contenido del bloque 2 -->
		</section>
	</div>
	<div class="sk">
		<section id="seccion3" class="skContenido">
			<!-- Contenido del bloque 3 -->
		</section>
	</div>
</body>

Y estos estilos:

.sk {
	margin: 0px -100px;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
}
 
 
.sk:nth-child(odd){
	background: #282A34;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
	margin-top: -200px;
}
 
.sk:nth-child(odd) .skContenido {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	padding: 150px 100px 250px 100px;
}
 
.sk:nth-child(even){
	background: #6690A3;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
 
.sk:nth-child(even) .skContenido {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
	padding: 150px 100px 250px 100px;
}

La única peculariedad es que es necesario un margin-top negativo en los elementos impares (según esta configuración) para ubicar bien los contenedores.

Etiquedado como

Deja un comentario

Tu dirección de correo electrónico no será publicada.