Code Snippet

Home » Code Snippets » CSS » Ribbon

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

Subscribe to The Thread

  1. Auré

    Really interesting and clever technique.
    The ribbon looks nice.
    Thanks for sharing :)

    Reply ↓
  2. Duje

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

    Reply ↓
    • Chris Howard

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

  3. Attila Hajzer

    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

    Reply ↓
  4. Sridhar Katakam

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

    Reply ↓
    • Colin

      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.

  5. Flaviu Gheorghita

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

    Reply ↓
  6. Gary

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

    Reply ↓
  7. gfactory

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

    Reply ↓
  8. Gigi

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

    Reply ↓
  9. Jonas Smets

    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

    Reply ↓
  10. Ollie

    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.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~