HTML Element Style How to - Create CSS3 Diagonal Section Dividers


We would like to know how to create CSS3 Diagonal Section Dividers.


<!DOCTYPE html>
<style type='text/css'>
section {<!--  w  ww .ja v  a 2s. co  m-->
    position: relative;
    text-align: center;
section:before {
    position: absolute;
section.diagonal {
    background: #EEE;
footer {
    position: relative;
    background: #DDD;
    text-align: center;
footer:before {
    position: absolute;
footer.diagonal {
    background: #AAA;
.diagonal {
    z-index: 1;
    padding: 3em;
.diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    <section class="diagonal">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
    <footer class="diagonal">

The code above is rendered as follows: