Create a Swish CSS3 Folded Ribbon in Five Minutes

Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Let's see how..

Step 1: Markup

We'll begin with an empty HTML document; doctype, charset declaration, head, body, the usual suspects. You'll also notice we're linking to the Google Web Fonts API so we can make use of the pleasantly decorative Montez typeface.


<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8" />

	<title>Swish CSS3 folded ribbon effect.</title>
	
	<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
		
</head>

<body>

</body>

</html>

Now we'll add our ribbon element. That's right, one element, that's all we need. In this case we're using an h1 header:


<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8" />

	<title>Swish CSS3 folded ribbon effect.</title>
	
	<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
		
</head>

<body>

	<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>

</body>

</html>

Step 2: Stir in Some Style

Open up a new CSS file, link to it in the head of your document, then jump into adding some styles.


html {	
	background: url(black-linen.png); 	/* Black Linen http://subtlepatterns.com */
	}
	
body {
	margin: 0;
	padding: 100px 0 0 0;
	}

.ribbon {
	padding: 0 25px;
	height: 80px;
	
	background: #c94700;
	color: #301607;
    
	position: relative;
	float: left;
	clear: left;
	
	font-family: 'Montez', cursive;
	font-size: 32px;			
	line-height: 80px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
	}

We've started by styling the html and the body, just for the purposes of the demo (and yes, I've used an image for the background, but the ribbon itself is 100% image free).

Then, we turn our attention to our ribbon element. We give it some padding left and right, but we're quite specific about the height (in this case 80px) as we'll need to replicate that for the folded-up end later. We also specify the line-height as 80px so that the text is centered vertically on the ribbon. We float and clear it left so that we can display several along the edge of the page if we want to.

Note: If, for whatever reason, you don't want to float your ribbon, give it a display: inline-block;. This will cause it to be handled as an inline element (it won't fill up its parent), whilst at the same time behaving like a block-level element, allowing you to define width, height, padding, margins etc.

Looks nice enough already, eh?

Step 3: The Fold

We're going to add the fold by targeting the ever-popular :after pseudo-selector. Here he is..


.ribbon:after {
	content: "";	
	display: block;
	width: 40px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 20;
	
	border-bottom: 80px solid #de6625;
	border-right: 80px solid transparent;
	}

See it?

So what exactly is that odd blade-like thing we've just made, and how does it help us? It's a border, the bottom border of our :after pseudo-element, which we've made 80px in thickness to match the height of our ribbon. We've sliced off the edge of it at 45° by defining the adjacent right-border and giving that a deliberate transparent background (not an uncommon trick). We've given it a width of 40px which determines the rectangular end. A diagram will make that clearer:

How our element is constructed

Step 4: Tables Turn

Having built our foldy-bit, we now need to pivot it on its end. To do that we're going to employ CSS3 transform properties and rotate it, like this:

Where would the world be without diagrams?

By default, applying a rotation to the element will spin it round a central axis - we need to turn it around its bottom right point, that's why we positioned it at the bottom right of the ribbon.

Here's the updated syntax, with a whole pile of vendor-specific rules to make sure all possible browsers are catered for:

 highlight="41-50"
.ribbon:after {
	content: "";	
	display: block;
	width: 40px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 20;
	
	border-bottom: 80px solid #de6625;
	border-right: 80px solid transparent;
	
	-webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
	}

Each transform:rotate property twists our object 90°. Each transform-origin property states that it's to be rotated around the bottom right point.

So, how's it looking?

Sweet!

We have ourselves a simple, yet effective ribbon, which will happily render in the following browsers:

Firefox 3.5+
Opera 10.5
Safari 3.1+
Chrome
IE9

Anything below IE9 will currently come unstuck with the CSS3 transformations we've applied, but there is a workaround in the form of MS filters. I'm not going to delve into filters here, but if you need to cater for IE4 or above, then check out CSS3 Please! to see a neat example of them in action.

Step 5: Dark Shadows Falling

To add some dimension to the effect, let's place a shadow under the flap-thing (I still don't know what to call it).

It couldn't be easier, we'll use the :before pseudo element of our ribbon and repeat more-or-less what we did for the :after; create a black version of the shape, rotate it slightly less, and make sure (using z-index) that it's placed under the original.


.ribbon:before {
	content: "";	
	display: block;
	width: 40px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 10;
	
    border-bottom: 80px solid #000000;
	border-right: 80px solid transparent;
	
	-webkit-transform: rotate(80deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(80deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(80deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(80deg);
    -ms-transform-origin: right bottom;
    transform: rotate(80deg);
    transform-origin: right bottom;
	}

Here's what we get:

Step 6: Subtle, Real Subtle

Probably best we tone down the effect of that shadow by shortening it and playing with its opacity.


.ribbon:before {
	content: "";	
	display: block;
	width: 20px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: 0px;
    z-index: 10;
	
    border-bottom: 80px solid rgba(0, 0, 0, 0.3);
	border-right: 80px solid transparent;

We've swapped out the border color of #000000 for its RGBA equivalent, which (again) is fine for all aforementioned modern browsers including IE9. If you want to cater for earlier versions of IE then you'll once again need to apply the effect using MS filters. The following snippet is an example of doing so:


	/* required to trigger hasLayout for IE 5, 6, 7 */
   	zoom: 1;
   	
   	/* and this makes the whole lot 30% opaque */
    filter: alpha(opacity=30);

Let's also add a similar drop-shadow to the ribbon itself..


.ribbon {
	padding: 0 25px;
	height: 80px;
	
	background: #c94700;
	color: #301607;
    
	position: relative;
	float: left;
	clear: left;
	
	font-family: 'Montez', cursive;
	font-size: 32px;			
	line-height: 80px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
	
	-moz-box-shadow:        -7px 7px 0px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow:    	-7px 7px 0px rgba(0, 0, 0, 0.3); 
    box-shadow:             -7px 7px 0px rgba(0, 0, 0, 0.3);
	}

..which gives us this:

Step 7: Highlight

We've built an effective ribbon and you may well want to use it just as it is. Before we call it a done deal, let's just look at a couple of additional touches.


.ribbon {
	padding: 0 25px;
	height: 80px;
	
	color: #301607;
	
	background-color: #c94700;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100)); 
    background-image: -webkit-linear-gradient(top, #c94700, #b84100); 
    background-image:    -moz-linear-gradient(top, #c94700, #b84100); 
    background-image:     -ms-linear-gradient(top, #c94700, #b84100); 
    background-image:      -o-linear-gradient(top, #c94700, #b84100); 
    background-image:         linear-gradient(top, #c94700, #b84100);
	
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

Here we have a subtle gradient fill on the ribbon, complete with various vendor prefixes and the background-color fallback for non-supporting (-IE10) browsers. We've also added a flash of highlight to the bottom of the ribbon with a light border.


.ribbon:after {
	content: "";	
	display: block;
	width: 40px;
	height: 0px;
	
	position: absolute;
    right: 0;
    bottom: -1px;
    z-index: 20;

Having added a border, we've effectively made the ribbon 1px higher, so we need to bump the foldy-thing down a tad.

Step 8: Final Flourish

If you want to go really crazy, why not soften up the fold itself? It's easily done with an uneven rounded corner and a bit of positioning adjustment.

1
2	border-bottom-right-radius: 20px 5px;

That's the rounded corner

1
2	bottom: 4px;

1
2	bottom: 4px;

And that's the foldy-bit, plus shadow, lifted slightly to account for the alteration.

A subtle, yet effective bend in the ribbon

Conclusion

That's it! There's nothing else to say - try it and let me know what you think. As always, thanks for following along!