11 Mar 2012 11:30

11 Mar 2012 11:30

Wrap-around ribbons with CSS

Now with semantic code

A while ago, back in 2010 when I was an innocent wee-little CSS newbie, I wrote a piece about creating a ribbon header with 'pure' CSS3, with what I thought was some pretty good code. That article got tweeted by @smashingmag, which generated a lot of traffic to my humble little site. It didn't take long before visitors started to point out better ways of achieving the same effect. Only now, finally, am I writing about the more semantic method of creating CSS ribbons.

Ribbons with CSS

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

The markup is super-simple.

<div class="ribbon">
    <h3>Header text</h3>
    <p>Body text</p>
</div>

For the CSS, the header is given a width 10px wider than the box (1), and positioned relatively with a negative margin to the left to centre it (2). The triangles that make up the wrap-around ribbon are psuedo ::before and ::after elements, positioned absolutely (3). The rest of the CSS is just for looks.

/* vendor prefixes removed for clarity */
.ribbon {
    width: 350px;
    margin: 10px auto;
    padding: 0 10px 0;
    position: relative;
    color: #444;
    background: #fff;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ribbon h3 {
    display: block;
    height: 30px;
    line-height: 1.3;
    width: 360px;
    margin: 0;
    padding: 5px 10px;
    position: relative;
    left: -16px;
    top: 8px;
    color: #cfcfcf;
    text-shadow: 0 1px 1px #111;
    border-top: 1px solid #363636;
    border-bottom: 1px solid #202020;
    background: #333;
    background: linear-gradient(top, #383838 0%, #262626 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before,
.ribbon h3::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -11px;
    z-index: -10;
    border: 5px solid;
    border-color: #242424 transparent transparent transparent;    
}
.ribbon h3::before {left: 0;}
.ribbon h3::after {right: 0;}

One thing to watch out for is the z-index - the pseudo elements are given a negative value so that they appear behind the containing box (which needs to have a background defined, else they will still be visible behind it). Depending on your existing CSS, the negative z-index could make the triangles disappear behind another element.

Replacing the triangles with circles can give a more rounded ribbon. A subtle gradient across the circle aids in the effect of the ribbon wrapping around the box.

Rounded CSS Ribbon

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

/* Round */
.ribbon.round h3 {
    border-radius: 4px;
}
.ribbon.round h3::before,
.ribbon.round h3::after {
    width: 10px;
    height: 10px;
    bottom: -4px;
    border: none;
    border-radius: 10px;
}
.ribbon.round h3::before {
    background: #33aaf8;
    background: linear-gradient(left, #33aaf8 0%, #0674bb 100%);
}
.ribbon.round h3::after {
    background: #33aaf8;
    background: linear-gradient(right, #33aaf8 0%, #0674bb 100%);
}

Browser Support

The ribbons work fine in the latest versions of Safari, Chrome, Firefox and Opera. I haven't tested them in IE.

Enjoy the article? Tweet it!

tags — 3d css ribbon

Discussion - 7 comments

Anonymoustsangk 24 Mar 2012 06:06

And yup, this also works in IE 10:

Edit

Bram van der VeenAnonymousAnonymous 17 Jun 2012 12:31

Awesome, Let's take a look if I can use this is my future works, im a CSS newbie myself :)

Edit

mikalAnonymousAnonymous 11 Jul 2012 14:04

Nice work here but I can't seem to change the banner color

Edit

mikalAnonymousAnonymous 11 Jul 2012 14:18

Never mind on that last comment duh. Thanks for the code.

Edit

AnonymousRobElliott 26 Aug 2012 16:12

Although you have done this as a ribbon, it's also possible to do this on a Wikidot top bar menu.

This example is at http://vineyard.wikidot.com

The CSS is:

#top-bar:before, #top-bar:after {
    bottom: -24px;
    content: "";
    display: block;
    position: absolute;
    z-index: -10;
}

#top-bar:before {
    border-color: transparent #444 transparent transparent;
    border-style: solid;
    border-width: 0 22px 25px 0;
    height: 0;
    left: -1px;
    width: 0;
}

#top-bar:after {
    border-color: #444 transparent transparent;
    border-style: solid;
    border-width: 25px 22px 0 0;
    height: 0;
    right: -1px;
    width: 0;
}

Edit

AnonymousRobElliott 27 Aug 2012 19:58

The image above is now at http://plone4.wikidot.com

Edit

TroyAnonymousAnonymous 26 Sep 2012 20:29

Excellent Ribbon Box: 1 Question, can this box scroll it's content; have a fixed height and a scroll bar on the right? I would appreciate the help..

Edit

Add a new comment