Grow your CSS skills. Land your dream job.

Last updated on:

Ribbon

<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;
    
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

Protector

This technique uses negative z-index values on some of the pseudo elements. That means that they can go behind other elements that have opaque backgrounds, which ruins the effect. To fix this, you'll need to make sure the immediate parent of the ribbons does not have a background applied and has relative postioning with positive z-index. Use an additional wrapper if needed.

<div class="non-semantic-protector"> 
   <!-- ribbons and other content in here -->
</div>
.non-semantic-protector { position: relative; z-index: 1; }

Example

Everybody loves ribbons

Comments

  1. good1… i personally dont know anyone who doesnt love ribbons :)

    • Chris Howard
      Permalink to comment#

      I hate ribbons . Never ever seen them done right. E.g. In this example, where’s the shadow cast by the ribbon?

    • improvise dude… the tutorial is to show you how to make a ribbon in CSS, not to trick it all out for you. Read into the abilities of the webkit because drop shadowing does not work in all browsers.

      add this to your ribbon, it will work in Firefox.. Also, you can change the opacity by adjusting the alpha levels of in the hex.

      -moz-box-shadow: 3px 3px 4px #999;
      -webkit-box-shadow: 3px 3px 4px #999;

      Next time don’t be so quick to run your mouth, this guy is doing all of us web designers a favor by making a nice place for us to reference while developing. Nobody is going to hold your hand while your learning all of these different languages so don’t be so quick to bad mouth the ones trying to help out in the first place.

    • Asindu
      Permalink to comment#

      I love this!!!!

  2. I absolutly Love this!!

    i was having a hard time doing this in photoshop the other week. and im glad there’s a css way too! it is quite a few lines of code. but thank you so much thinking of all this. you really do put a lot of time and effory in your tuts, and screen casts! im truly grateful for everything you’ve done Chris. Thank you

    – Attila

  3. Is there a way to make this work in IE 8 and below?

    • Colin
      Permalink to comment#

      I’m running IE8 and the example here doesn’t work but James’ Reference URL works great…

      http://jameskoster.co.uk/blog/pure-css-3d-ribbon/

      I quickly compared the CSS but didn’t find anything different…but the solution is there somewhere.

      I like this ribbon, sharp edges but the fact that it doesn’t use a graphic is somewhat inspiring. Thanks for sharing.

    • Mariano
      Permalink to comment#

      You can make this work in IE 8 using html5shiv

  4. Wow, thanks for sharing, very interesting to know.. This is really great!

  5. Permalink to comment#

    I love the use of the pseudo elements – can’t wait to try and thanks for sharing.

  6. gfactory
    Permalink to comment#

    Thanks man,I love it!!
    Thanks for sharing.

  7. Gigi
    Permalink to comment#

    I’ve tried to do this a few times and wonder how it works in a nav menu as the bar.

    • Samia
      Permalink to comment#

      Works very well, just implemented the code in a responsive navigation menu made with bootstrap! :D

  8. Permalink to comment#

    Hi there,

    Love this tutorial. Only thing I can’t figure out is how I can implement it with my wordpress menu?
    The menu is build with the following code:

    ‘header’, ‘container’ => ” ) ); ?>

    What I don’t understand is how I can create extra classes to add the css code to?
    Greetings,
    Jonas

    • Permalink to comment#

      Something went wrong with the presentation of the code. I’ve made a topic in the css forum about this.
      Hope someone can help me out?

      http://css-tricks.com/forums/discussion/13611/my-wordpress-menu-with-a-ribbon

      Jonas Smets

    • this one works for adding class in wordpress menu
      wp_nav_menu( array( ‘container_class’ => ‘menu-header’ etc

      tried some other modification for a logo overlapping the ribbon (with navigation) somehow not working for other browser except for Firefox .(without css hacks)
      I’m still working on a project with ribbon nav and this tutorial is really helpful.

      Credits to the author!

  9. Very cool, didn’t know I could do this in CSS.

    But does anyone have a hack for this effect in IE8 and below? Because it isn’t working in those browsers, which means I can only use this on personal projects and not for anything else.

  10. Justin

    @Chrizzi That is very helpful, thanks! Good to know this effect can gracefully fall back. Sweet!

  11. Really love this trick!

    However I wonder how to create this type of ribbon using CSS:

    http://img822.imageshack.us/img822/4185/ribboni.jpg

    And could we automatically adjust the ribbon height so that I can type longer/shorter text content without even re-adjusting the css height parameter manually?

  12. Matt
    Permalink to comment#

    I believe the IE8 problem can’t be fixed, but one thing we can do is set up the ribon the other way, i.e. as if the sides were before the content, not behind.
    You can achieve this by simply removing the z-index:-1; line, and replacing
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
    with
    border-color: #804f7c transparent #804f7c transparent;
    top:0;
    in the .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {…} declaration

  13. Permalink to comment#

    You may also want to set top:1em; on .ribbon:before, .ribbon:after {…}
    This way the things doesn’t break if your content goes on two lines

  14. Justin
    Permalink to comment#

    So how would I make a ribbon without the “folds”? I thought of doing a sidebar with a ribbon background for the active page’s link. Something like this shape:

    http://www.photoshopstar.com/wp-content/uploads/2008/03/ribbon-filled-yellow.jpg

    Or.. how would you make a ribbon with both sides with the same triangular cut?

    I’d like to do this with list items, not divs, though. Any ideas?

  15. Permalink to comment#

    That’s amazing…I was actually looking for it since two days…couldn’t figure it out with Photoshop..!!!
    Thank You..!

  16. Permalink to comment#

    Yes i think everybody love ribbon, including me. I wonder How to make this ribbon as a html menu? is it only use href? Thanks.

  17. eric
    Permalink to comment#

    If you want to use it as an html menu, just embed a <ul> of your nav inside .ribbon-content. Anyone else having issues with this in mobile? Specifically, the z-index seems to get ignored, bringing the ends of the banner above the main ribbon. It works great on desktop browsers, but in chrome on my android phone, the corners are on top.

  18. Michael
    Permalink to comment#

    Thanks for providing this. I would like to modify this result, but do not understand how it works. A step by step commenting of the css and what each part of it does would be very helpful. Has anyone created those type of comments?

    I’m especially confused about the ribbon:before, ribbon-content:before and :after lines in the CSS

    thanks

  19. Permalink to comment#

    Nice tutorial – I’ve actually created a similar walk-through on my site. However, my ribbon wraps around a box element and has a drop shadow as well. Uses the same :before and :after technique. http://www.designcouch.com/demos/pure-css-ribbon-banner.html

  20. Deceryl Marie Langbid

    I am new to create ribbon designs in my web pages and this tutorial helped me a lot! Thank you so much! How wonderful your tutorials you are! I salute you!

  21. Anna
    Permalink to comment#

    Smashing! Just the little touch my project needs.

  22. Avdhut
    Permalink to comment#
  23. shahjehan
    Permalink to comment#

    Pseudo code e.g (after and before) is not working ie7 and ie8

  24. Dave
    Permalink to comment#

    That non-semantic protector code just fixed an issue I’m having with fancy box-shadows (i.e. lifted corners) using pseudo elements with Foundation 4. They weren’t appearing unless the <body> and parent container tags both had background:none. Adding { position: relative; z-index: 1; } to the parent div fixed it. Awesome!

  25. Coridyn
    Permalink to comment#

    For people who still need to target IE8 there is a slightly less semantic approach that will work:

    Add a .ribbon-style element before .ribbon-content
    Move the styles from .ribbon :before and :after to .ribbon > .ribbon-style:before and :after
    Remove padding and background-color from .ribbon and apply them to .ribbon-content

    Here is a demo fiddle: http://jsfiddle.net/Sly_cardinal/m8U2t/1/

    HTML:

    <h1 class="ribbon">
        <!-- 1. Add a .ribbon-style element before .ribbon-content -->
        <div class="ribbon-style"></div>
        <div class="ribbon-content">Everybody loves ribbons</div>
    </h1>
    

    CSS:

    /* 2. Change the styles from ".ribbon:before" and ":after" to ".ribbon > .ribbon-style:before" and ":after" */
    .ribbon > .ribbon-style:before, .ribbon > .ribbon-style:after {...}
    .ribbon > .ribbon-style:before {...}
    .ribbon > .ribbon-style:after {...}
    
    
    /* 3. Remove padding and background-color from .ribbon and apply them to .ribbon-content */
    .ribbon {
        padding: 0;
    }
    .ribbon .ribbon-content {
        background-color: #ba89b6;
        padding: 1em 2em; /* Adjust to suit */
    }
    
  26. D.O.
    Permalink to comment#

    Great Article!

  27. Permalink to comment#

    I’d like to adjust this example to work with a tables head. Could you help me?

    http://jsfiddle.net/qU7Ba/1/

  28. noushad
    Permalink to comment#

    suberb Bro!!!!!!

  29. I see your neat ribbon, I raise you mine : http://cybernext.in/

    Check out the ribbon at the bottom.

    Because of using z-index:-1; it neatly fits in below the box-shadow of the parent div.

    Here’s the code:

    .ribbon:before {
    border-left: 25px solid transparent;
    border-top: 25px solid #951a1d;
    border-bottom: 25px solid #951a1d;
    border-right: 25px solid #951a1d;
    position: absolute;
    content: '';
    left: -30px;
    top: 10px;
    z-index: -1;
    }
    
    
    .ribbon:after {
    border-right: 25px solid transparent;
    border-top: 25px solid #951a1d;
    border-bottom: 25px solid #951a1d;
    border-left: 25px solid #951a1d;
    position: absolute;
    content: '';
    right: -30px;
    top: 10px;
    z-index: -1;
    }
    
    
    ::before
    "We Create what you Envision"
    ::after
    
    • Meh. No offense, but there’s a lot of over-design going on there.

    • None taken. I’ve got a lot to learn..

      PS: It’s funny how your comment goes with your picture

    • Rather I’ll appreciate if you’ve got any tips for that

    • Vin – nice to see someone open to critique! I tend to not give it unsolicited, as a lot of folks take it personally.

      A few tips:

      Don’t style the cursor. It’s un-necessary and disruptive to the UX
      Avoid un-necessary borders and boxes. Separation of content should be implied by things like white space and content placement, not a literal border
      Decoration for the sake of decoration (like the dashed border on your ribbon) is bad design
      You’re over-using drop shadows
      Don’t center un-ordered lists; bullets should always line up
      Learn about and use white space correctly
      Your 3d interface is actually quite intriguing, and if done well could be really nice

      These are just a few starting points, and are not criticism at all; they’re critique. Wrote an article a while back about this.

    • Permalink to comment#

      Thanks buddy! I’ll take a note of these n definitely update the site whenever I get the time to.

  30. Marz
    Permalink to comment#

    Is there a way to make this ribbon a hyperlink?

    I changed:

    <strong>
    Register Now
    </strong>
    

    To:

    <a href="http://google.com/" rel="nofollow">
    Register Now
    </a>
    

    But this doesn’t work

    • Permalink to comment#

      Make the ribbon an offer..it can’t refuse!

      Just kidding!
      Marz, it’s easy:

      Put the <a> tag before the parent element.

      Change this

      <a href="http://cybernext.in">
          <strong>
          Register Now
          </strong>
      </a>
      

      to this:

        <a href="http://cybernext.in">
          <h1 class="ribbon">
              <strong>
                 Register Now
              </strong>
          </h1>
        </a>
      
  31. Thanks Chris.

    I personally hate ribbons, but clients do love them :)

    • Not bad. Forked yours, and simplified the code quite a bit. I eliminated your span, and the extra associated pseudo-elements by utilizing the content area of the remaining pseudo elements.

  32. Tarek Jellali
    Permalink to comment#

    Very great tip! Thanks for sharing :) !

  33. Permalink to comment#

    This is great! Thanks so much! I was hoping you could help with an issue I’m having animating this ribbon’s position. See my JSFiddle: http://jsfiddle.net/vf75sbgm/
    Thanks again!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".