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.

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..

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:

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.

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:

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.