CSS ribbons

April 7, 2011 by Catalin Rosu - 37 comments

You may already know what a ribbon is and how it looks. Nowadays, the CSS ribbon effect is a web design trend. It’s cool and it can help you by adding a 3D effect to your design.

So, in this article you’ll learn how to create CSS ribbons, without any images and minimal HTML markup.

Why would I need CSS ribbons?

As a matter of fact, you could just use images for your ribbons. But, using CSS to create the ribbons has the following advantages:

No images, no extra HTTP requests
Flexibility
Easy to update: color, size, etc
Spice up the ribbons with CSS3 and you’ll love them ;)

View demo

CSS ribbon structure

Initially, let’s say you have a wrapper with padding: 20px. What is about with this padding? Usually, you need a spacing for your box and you’ll see below why this matters when it’s about ribbons.

Now let’s add the element that will become our ribbon. For that, you will need just one element, like a h1 for example:

H1 element with some styling

Remember the above 20px padding value? In order to build your ribbon, you need the heading to overcome the box sides:

h1
{
  margin: 0 -30px; /* top:0, right:-30px, bottom:0, left:-30px */
}

Further, to add the corners, we’ll use CSS triangles made with pseudo-elements.

    h1{
        text-align: center;
        position: relative;
        color: #fff;    
        margin: 0 -30px 30px -30px;
        padding: 10px 0; 
        text-shadow: 0 1px rgba(0,0,0,.8);
        background: #5c5c5c;
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
    }
    
    h1:before, h1:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }
    
    h1:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }
    
    h1:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }

Using the above CSS, you will achieve something like this:

Check aslo the demo page to see some ribbons I made:

View demo

Browser support

IE6 and IE7 does not support pseudo-elements but, if you need them also, just replace the :before and :after with HTML elements like span. That should do it for you in this case!

IE8, IE9, IE10, Firefox, Opera, Chrome and Safari render well the ribbon. There are some minor differences, but just because of incomplete or missing CSS3 support. Guess who!?

Thanks for reading this article!

If you enjoyed this article, tweet it and/or follow me!

If you enjoyed this article, get updates via RSS or email (it's free).

37 thoughts on “CSS ribbons”

Rajesh on April 8, 2011 at 07:47 said:

Thanks U For Sharing This Beautiful Trick Keep It Up…
Reply ↓
Ashish on April 8, 2011 at 08:33 said:

Wow, it’s quite nice and simple…
Following these steps, this became very easy to create ribbons for headings in the page now.
Looks gr8! thanks Catalin…!!
Reply ↓
- Red on April 8, 2011 at 09:43 said:
  
  Nice to hear you found this helpful. Thanks for reading Ashish!
  Reply ↓
Alejandro on April 8, 2011 at 21:40 said:

Oh nice tut man!
it has been quite interesting and inspiring for me! very helpfully!
it runs on the way “how to finally understand pseudo-classes :before & :after”!!
thank you!!
Reply ↓
- Red on April 9, 2011 at 01:07 said:
  
  Thanks Alejandro, I’m glad that it was helpful for you.
  Further, I’m planning to write an article about pseudo-classes and pseudo-elements differences.
  So stay tuned! :)
  Reply ↓
chephz on April 12, 2011 at 08:16 said:

waw,. its cool.. nice share,.
now i can use the ribbon without make image again,. just do that with notepad :D
I asked permission to be stored on my blog
Reply ↓
- Red on April 12, 2011 at 09:30 said:
  
  Thanks @chephz, nice to hear you like it.
  Indeed, that’s the main advantage of CSS ribbons: you can edit them really fast.
  Reply ↓
vitmel on April 12, 2011 at 11:24 said:

I have a ribbon on my website, and it is a huge image. So, maybe i will consider to replace my image with pure css in the future. Its gonna be a headache. Need more practice with css. Looking forward to seeing more of your articles.
Reply ↓
- Red on April 13, 2011 at 20:42 said:
  
  Vitmel, I think creating a CSS ribbon don’t have to be a headache for anybody.
  As you read in this article, this is not very complicated, so it should be handy.
  Thanks for reading!
  Reply ↓
Aura on April 12, 2011 at 11:32 said:

Nice job!! Thanks for sharing!
Reply ↓
- Red on April 13, 2011 at 20:42 said:
  
  Thank you also for reading this article!
  Reply ↓
website designer uk on April 12, 2011 at 13:22 said:

Thanks a lot for sharing this nice post!You’ve done really excellent job!
Reply ↓
hrushi on April 17, 2011 at 18:48 said:

Thank you so much for sharing.
Keep posting such tuts.
Reply ↓
- Red on April 17, 2011 at 22:07 said:
  
  Thanks for reading!
  Reply ↓
Will on April 18, 2011 at 13:30 said:

Sounds a lot like these earlier articles:
http://www.prothemer.com/blog/experiments/no-presentational-markup-css3-infobox/
http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
Reply ↓
- Red on April 18, 2011 at 14:18 said:
  
  The reason why I’ve written this article is because ribbons are more and more used around the web, thus this is the reason why you see lots of articles on this topic.
  But I wanted to show my own way of creating them and even if the idea is the same (how to create ribbons), this is how I do it.
  Thanks for your comment!
  Reply ↓
Ric on April 28, 2011 at 20:45 said:

Can you provide an example for browsers that do not support pseudo-elements?
Reply ↓
- Red on April 28, 2011 at 21:02 said:
  
  The :before and :after pseudo-elements are not supported by IE5.5 to IE7.
  Reply ↓
Caleb on May 18, 2011 at 05:52 said:

Nice…You do great work!
I also seen a site today with the ribbon as navigation. It’s pretty cool too, but no tutorial. Perhaps you could do a tutorial based on how the site link below was able to use the ribbon as a navigation tool, including the hover effect.
http://www.davlicmedia.com/
Keep up the great tutorials!
Reply ↓
- Red on May 18, 2011 at 09:36 said:
  
  Caleb, it is nice to hear you like my articles.
  Regarding your tutorial idea, I will think about it and I’ll write for sure an article about it.
  Thanks for your comment!
  Reply ↓
  - Caleb on May 18, 2011 at 18:38 said:
    
    Thanks Red! Much appreciated. The HTML5 and CSS3 tutorials you share are awesome and I can tell you like helping others because of the time you put into each tutorial. I know you will like this site link. People with your creativity love to see well coded sites I’m sure. Take a look at this one and be sure to move your mouse over the About Me, Portfolio images hanging down at the top. I found it last night and it blew my mind.;-) http://www.vdezignstudio.com
    Reply ↓
adriana on June 22, 2011 at 19:36 said:

felicitari!! f tare!!
Reply ↓
- Red on June 22, 2011 at 19:45 said:
  
  Multumesc (Thanks) Adriana!
  Reply ↓
Ankur on July 19, 2011 at 20:49 said:

Hey !!! great tutorial….But can you plz help me in making CSS ribbons compatible with IE6 and IE7…
Thanks
Reply ↓
- Red on July 19, 2011 at 21:10 said:
  
  In order to have ribbon effect on IE6 and IE7, just replace the :before and :after pseudo-elements with HTML elements like span.
  Here is a quick structure example:
  <h1><span class="left"></span>CSS Ribbons<span class="right"></span></h1>
  Reply ↓
  - Joseph on September 9, 2011 at 22:45 said:
    
    Hey Red,
    Can you make an example that is working with IE7? I totally get structure example but for some reason the span element is higher (index) than the h3 element. I tried giving them z-index but it doesn’t work.
    Thanks.
    Reply ↓
Андрей on July 28, 2011 at 21:16 said:

Hello, I liked the tape, I want to use them for navigation menus, but it does not work. Please help me figure out how to apply them to the template in joomla menu modules on the left and right speakers. Which file to edit, and where that fits. thanks
Reply ↓
FlaShow on September 12, 2011 at 17:51 said:

I’m try to make the CSS Ribbon with ASP.net Master Page but it is not work properly. Can you give me a code for CSS Ribbon with the white box work fine in ASP.NET. please?!
Reply ↓
forum skins on September 17, 2011 at 08:15 said:

Cheers for this :)
I have been using images to produce this effect on some of our premium forum designs, using css for the same effect is going to be much easier.
Lisa
Reply ↓
Tams Laborte on November 18, 2011 at 14:47 said:

Awesome!
Used it here, but added CSS for the width and z-index since I want it on top of an image.
http://pepsquadevents.com/
Thanks for sharing.
Reply ↓
- Red on November 18, 2011 at 14:52 said:
  
  Great, nice to see you’re using this!
  Reply ↓
S.A Bhatti on November 28, 2011 at 08:40 said:

wao that good tutorial. carry on your work.
Thank a lotttttttttttttttttttttt
Reply ↓
- Red on November 28, 2011 at 09:40 said:
  
  Thanks, I’m glad you liked it.
  Reply ↓
Priyanka on July 25, 2012 at 12:58 said:

Thank u for sharing. its really working well..
Reply ↓
Guillermo on October 27, 2012 at 09:46 said:

Ey gracias amigo esto es genial!
El secreto está en hacer las cosas simples.
Saludos!
Reply ↓
Izzie on December 11, 2012 at 03:14 said:

Gracias por compartir!!!
Reply ↓
Pavan Solapure on May 16, 2013 at 11:28 said:

It’s awesome man!! Will give it a try in my next assignment. Keep Sharing.
Reply ↓