How to Create CSS3 Paper Curls Without Images

In my previous posts, we discovered how to create speech bubbles and ribbons without additional HTML elements or images. They were achieved using CSS3 effects applied to the :before and :after pseudo-elements. In this post, we’ll use a similar technique to create a CSS3 paper curl effect.

Paper curls have been popular for a few years. The viewer sees a natural-looking slightly curved box but, in reality, it’s an optical illusion created by a shadow at the bottom of the element:

Until recently, you’d need to create the shadow as an image in Photoshop, Gimp or another graphics package. Ideally, it would be a 24-bit alpha transparent PNG which could be overlaid on any background — but that would cause issues in older browsrs.

Fortunately, CSS3 provides a great alternative with several benefits:

• The effect works in modern browsers but won’t be applied in browsers which don’t support it.
• The shadow can be overlaid on any background without requiring additional images.
• The effect can be applied to elements of any size.
• The code is reusable and uses far fewer bytes than an image-based shadow.
• The shadow is easy to configure. You can change the color or depth with a few code tweaks.

First, let’s create our single HTML element:

<div class="box">My box</div>

and apply a little shading to the inside and outside:

.box
{
	position: relative;
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

We now need curl effects on the bottom left and right edges. This is achieved by creating two :before and :after pseudo-elements which are:

1. rotated and skewed using CSS3 transforms (all the latest browsers support transforms with vendor prefixes)
2. positioned at the bottom edge, and
3. given a box shadow.

We can now move the elements behind the main box using z-index: -1. Therefore, just the edge of their shadow becomes visible:

The pseudo-element CSS code:

.box:before, .box:after
{
	position: absolute;
	width: 40%;
	height: 10px;
	content: ' ';
	left: 12px;
	bottom: 12px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	-moz-transform: skew(-5deg) rotate(-5deg);
	-ms-transform: skew(-5deg) rotate(-5deg);
	-o-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
} 

.box:after
{
	left: auto;
	right: 12px;
	-webkit-transform: skew(5deg) rotate(5deg);
	-moz-transform: skew(5deg) rotate(5deg);
	-ms-transform: skew(5deg) rotate(5deg);
	-o-transform: skew(5deg) rotate(5deg);
	transform: skew(5deg) rotate(5deg);
}

That’s a lot of vendor-prefixed code to achieve an effect, but it requires fewer bytes and HTTP requests than a graphic.

Please see the demonstration page for an example. It works as expected in IE9, Firefox, Chrome, Safari and Opera. IE6, IE7 and IE8 degrade gracefully and will not show any shadow effects. All the CSS code is contained in the HTML source.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Learn CSS3.

Comments on this article are closed. Have a question about CSS3? Why not ask it on our forums?