Grains Of Sand | Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos - Step By Step Guide
Folded Corner

What We're Aiming For

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Step One
Create and style the basic box and the text

Code

HTML
  • <section class="folded">
    <p>Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
    </section>
CSS
  • section.folded{
  • position:relative; /*lets us position the fold relative to the box*/
  • width:300px; /*width of the box*/
  • padding:20px 40px;
  • background:#a5a381; /*colour of the box*/
  • }
  • .folded p{
  • color:#f7f7f7;
  • }

Result

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.


Step two
Create a fold

Code

CSS
  • /*We're going to create a 65px fold slightly darker than the box*/
  • .folded:after {
  • border-right: #f1f1e3 65px solid; /*we don't want this border to be seen so we use the same colour as the page, the width of the border is the size you want the fold to be*/
  • border-bottom:#8c8a6c 65px solid; /*this border forms the most obvious part of the fold, use a colour slightly darker than the box (or whatever colour you imagine the reverse of the 'paper' to be), the size should be the same as border-right*/
  • content:""; /*creates a blank psuedo element which is used as the fold*/
  • /*add a small drop shadow to the fold*/
  • -webkit-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
  • -moz-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
  • box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
  • }

Result

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.


Step Three
Finally position the fold - this time at the top right of the box

Code

CSS
  • .folded:after {
  • position:absolute; /*positions the fold relative to the box created above rather than the whole page*/
  • top:0; /*places the top of the fold 0px from the top of the box*/
  • right:0; /*places the right side of the fold 0px from the right side of the box*/
  • }

Result

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.


Here's the CSS for folds on the other 3 corners of the box

Left Top

CSS
  • .folded-lefttop:after{
  • content:"";
  • position:absolute;
  • top:0;
  • left:0;
  • border-bottom:#8c8a6c 65px solid;
  • border-left:#efefe1 65px solid;
  • }

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Left Bottom

CSS
  • .folded-leftbottom:after{
  • content:"";
  • position:absolute;
  • bottom:0;
  • left:0;
  • border-top:#8c8a6c 65px solid;
  • border-left:#efefe1 65px solid;
  • }

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Right Bottom

CSS
  • .folded-rightbottom:after{
  • content:"";
  • position:absolute;
  • bottom:0;
  • right:0;
  • border-right:#efefe1 65px solid;
  • border-top:#8c8a6c 65px solid;
  • }

Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Back to the demo More CSS3 Demos This Way