Sloped containers with CSS3

In my last website I decided to implement sloped pages using CSS3. Something like that:

The point of this technique is not doing it with background images.
To achieve this, you only have to rotate the containers in one direction and its content in another. If you also want to have a container skewed in one direction and the next container skewed to another direction, it can be done by playing with the values ​​of the body and the position of the even containers and the odd containers.

For example, with this html structure:

<body>
	<div class="sk">
		<section id="section1" class="skContent">
			<!-- Block 1 content -->
		</section>
	</div>
	<div class="sk">
		<section id="section2" class="skContent">
			<!-- Block 2 content -->
		</section>
	</div>
	<div class="sk">
		<section id="section3" class="skContent">
			<!-- Block 3 content -->
		</section>
	</div>
</body>

And the CSS:

.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) .skContent {
	-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) .skContent {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
	padding: 150px 100px 250px 100px;
}

The only thing is that we need a negative margin-top for odd containers (according to this configuration) for a proper location of them.

This entry was tagged as

Leave a Reply

Your email address will not be published.