HTML Element Style How to - Create CSS3 Diagonal Section Dividers

Question

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

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
section {<!--  w  ww .ja v  a 2s. co  m-->
    position: relative;
    text-align: center;
}
section:before {
    position: absolute;
    content:'';
}
section.diagonal {
    background: #EEE;
}
footer {
    position: relative;
    background: #DDD;
    text-align: center;
}
footer:before {
    position: absolute;
    content:'';
}
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;
}
  </style>
</head>
<body>
    <header>
        <p>Header</p>
    </header>
    <section class="diagonal">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
    </section>
    <footer class="diagonal">
        <p>Footer</p>    
    </footer>
</body>
</html>

The code above is rendered as follows: