In this tutorial, we will learn how to create a cool corner tuck paper effect, similar to business card holders in bi-fold folders and resume folders. This may be helpful to help stylize your online resume and show off some of your CSS skills. to do so we will need to utilize the :before and :after pseudo classes and CSS transform property.

Corner Tuck CSS

HTMl structure

First we must build our html structure to tie the CSS we create later to. by looking at the picture you will notice there are four corner tucks. We are only allowed two pseudo classes (:before and :after) per div, so that means we need to create two separate divs with their own classes. These two divs will essentially sit on top of each other and act as placeholders the corner tucks. The white page will just be the content area for text. Here is an example of our HTML.

CSS stylings

The provided css will give you the desired effect to each class

Many of the stylings that you see are very straight forward. It is important to note that you must designate a relative position for the containing divs. This will help accurately place the corner tucks when we use absolute position to place the corner tucks. It is also important to point out that a z-index of 999 or greater should be placed in the .top-corners and .bottom-corners CSS to ensure that the objects stay above the containing divs. The CSS Transform is very straight forward and allows you to rotate objects (or styled divs in this case) to any degree. The box-shadow effect will help give the illusion that the divs below are tucked away.

Wrapping It Up

All together you document should look like the example below.

This is a very effective technique to give your website a realistic or skueomorphic design approach. You can take it a step further by adding texture background images to the paper and site to further emphasis you design look.