Corner Ribbon

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​

Comments

  1. User Avatar
    Jordan
    Permalink to comment#

    FF10 shows the top ribbon-fold encroaching about 1px on top of the wrapper, but I can’t seem to figure out why… Seems like adding bottom: -2px; to the .ribbon-green:before declaration makes it mostly look right, but I can’t quite tell..

  2. User Avatar
    James Morgan
    Permalink to comment#

    So much more flexible than using a static image. Super handy for such a commonly used design element. Very cool!

  3. User Avatar
    Brad
    Permalink to comment#

    Very nice approach. I despise having to use images for things like this. Hopefully MS kills off everything pre IE9 soon so we can more effectively use things like this.

  4. User Avatar
    decrement
    Permalink to comment#

    Very nice approach. Thank you.

  5. User Avatar
    Michael
    Permalink to comment#

    @jordan

    I get the px encroach too – in IE9, Chrome 17 & FF 11.
    To get rid of the top pixel encroach – here’s what worked for me:

    .ribbon-wrapper-green

    Change top: -3px; to top: -5px;

    Pixel begone!!

  6. User Avatar
    jery
    Permalink to comment#

    this looks very bad in IE. doesn’t look like a ribbon. it’s a square and it moves down my entire page (nav menu, feature box, etc) 3/4 of the way down the page. looks good in ff and chrome though.

  7. User Avatar
    David Potter
    Permalink to comment#

    thats very nice, thanks !

  8. User Avatar
    Osama
    Permalink to comment#

    Thanks Its Amzing

  9. User Avatar
    Kai
    Permalink to comment#

    Looks verry nice in all newer Webkit Browser and IE 9. All the other IE Versions doesn’t support this script. =( IE is such a bad thing -.-

  10. User Avatar
    Mat
    Permalink to comment#

    This is really nice. I’ll use it soon, who cares about the IE-User :-)

  11. User Avatar
    Dave
    Permalink to comment#

    This is a cool effect and anything with no images is your friend!

    Eh, who cares about IE anyways? M$ should just suffer for thinking it’s the only entity in the whole universe when its not!

    One thing in the example that would be nice is if the math could have been included. I can wiggle it around and get the right settings using firebug but would much rather busting out a calculator and getting the exacts!

    Please? b^.^d

  12. User Avatar
    Franzi
    Permalink to comment#

    beautiful, that was what I needed :)

  13. User Avatar
    Terry Wysocki
    Permalink to comment#

    How can I make the ribbon an active link?

  14. User Avatar
    Kaustubh Kushte
    Permalink to comment#

    thanks.. it is very easy to implement :)

  15. User Avatar
    Brian Enriquez
    Permalink to comment#

    Just implimented this today in an e-commerce store project. Depending on the ribbon class, the colors change: RENTAL, ON SALE, NEW, etc. Once again, thanks, Chris!

  16. User Avatar
    Fab
    Permalink to comment#

    Hello,

    How to adapt it on each corners ? I tried to modify the CSS to put the ribbon on top left corner but without any results :(

    Any idea ?

    Thanks for this nice CSS.

    Fab

    • User Avatar
      Littly Kittly
      Permalink to comment#

      @Fab: Did you work this out? If so, please share your code. I would also like to know how to put it in the top left corner.

    • User Avatar
      Wildcats
      Permalink to comment#

      Any luck?

    • User Avatar
      Chris
      Permalink to comment#

      .ribbon-wrapper-green

      change right to left.

      .ribbon-green

      add float: right;
      change left to right
      change rotation to -45degrees

    • User Avatar
      Brandon

      That worked, thanks!

  17. User Avatar
    Aravind
    Permalink to comment#

    Thanks for this Chris.. Much appreciated..

  18. User Avatar
    adex
    Permalink to comment#

    WOAH!! thats almighty Lovely..Thanx

  19. User Avatar
    Callum Burns
    Permalink to comment#

    How do you go about making it bigger?

  20. User Avatar
    Wildcats
    Permalink to comment#

    How to make the ribbon on top left corner?

  21. User Avatar
    sawankuma51
    Permalink to comment#

    where to set the html in wordpress?*new in wordpress

    • User Avatar
      Andrew Kenny
      Permalink to comment#

      You can add the css within your WordPress admin area, under Appearance -> Editor, then drop in the HTML directly in your page or post using the HTML tab in the WYSIWYG editor.

      I was looking for a clean way of doing something like this without images and works well as a basis for what I need, so thanks!

  22. User Avatar
    Spudgun3000
    Permalink to comment#

    I use the style like this to set it to the left

    <div class="ribbon-wrapper-blue">
    <div class="ribbon-blue">
    My Text
    </div></div>
    
    .ribbon-wrapper-blue {
    width: 350px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 5px;
    }
    
    .ribbon-blue {
    font: bold 14px arial;
    color: #ADDDE7;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -ms-transform:     rotate(-45deg);
    -o-transform:      rotate(-45deg);
    position: relative;
    padding: 16px 0;
    left: -46px;
    top: 25px;
    width: 200px;
    background-color: #ADDDE7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #ADDDE7, #89AFB7);
    background-image:    -moz-linear-gradient(top, #ADDDE7, #89AFB7);
    background-image:     -ms-linear-gradient(top, #ADDDE7, #89AFB7);
    background-image:      -o-linear-gradient(top, #ADDDE7, #89AFB7);
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
    }
  23. User Avatar
    Ian Campbell
    Permalink to comment#

    I made a smaller sale version in red that is left-aligned. Enjoy :)

    .ribbon-wrapper-red {
        width: 100px;
        height: 100px;
        overflow: hidden;
        position: absolute;
        top: -6px;
        left: -6px;
    }
    .ribbon-red {
        font-size: 13px;
        color: white;
        text-align: center;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        position: relative;
        padding: 2px 0;
        left: -21px;
        top: 8px;
        width: 82px;
        background-color: #BFDC7A;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#cc0000));
        background-image: -webkit-linear-gradient(top, #990000, #cc0000);
        background-image: -moz-linear-gradient(top, #990000, #cc0000);
        background-image: -ms-linear-gradient(top, #990000, #cc0000);
        background-image: -o-linear-gradient(top, #990000, #cc0000);
        -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    }
    .ribbon-red:before, .ribbon-red:after {
        content: "";
        border-top: 3px solid #900;
        border-left: 3px solid transparent;
        border-right: 3px solid transparent;
        position: absolute;
        bottom: -3px;
    }
    .ribbon-red:before {
        left: 0;
    }
    .ribbon-red:after {
        right: 0;
    }
    
  24. User Avatar
    Hieu
    Permalink to comment#

    This is insane. I know how to use pseudo classess, gradient, opacity, shadow… and thought I knew css3.
    Now looking at your code, I know that I know nothing.
    Thanks for sharing!!!

  25. User Avatar
    Vinestro

    Thanks a lot for you piece of code ! It really helped me ! I started making a ribbon with image, but when I saw your code and tried it, I changed my mind !

    Thanks again !

  26. User Avatar
    Neusatz
    Permalink to comment#

    Great stuff!

  27. User Avatar
    (v) Vadym Gulyi
    Permalink to comment#

    For more smoothing of elements in Webkit-based browsers add this:

    .ribbon-green {
        -webkit-backface-visibility: hidden; /* http://stackoverflow.com/a/6898097 */
    }
    
  28. User Avatar
    Thulani
    Permalink to comment#

    Awesome article. You are good.

  29. User Avatar
    mond
    Permalink to comment#

    this is exactly what i am looking for!! it worked for me! thanks!!!!

  30. User Avatar
    Mario Sánchez
    Permalink to comment#

    Bottom-left version

    
    .wrapper {
      margin: 50px auto;
      width: 280px;
      height: 370px;
      background: white;
      border-radius: 10px;
      -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
      position: relative;
      z-index: 90;
    }
    
    
    .ribbon-wrapper-green {
      width: 85px;
      height: 88px;
      overflow: hidden;
      position: absolute;
      bottom: -3px;
      left: -3px;
    }
    
    
    .ribbon-green {
      font: bold 15px Sans-Serif;
      color: #333;
      text-align: center;
      text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
      -webkit-transform: rotate(-315deg);
      -moz-transform:    rotate(-315deg);
      -ms-transform:     rotate(-315deg);
      -o-transform:      rotate(-315deg);
      position: relative;
      padding: 7px 0;
      left: -30px;
      bottom: -43px;
      width: 120px;
      background-color: #BFDC7A;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
      background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
      background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
      background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
      background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
      color: #6a6340;
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
      -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
      box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
    }
    
    
    .ribbon-green:before, .ribbon-green:after {
      content: "";
      border-bottom:   3px solid #6e8900;   
      border-left:  3px solid transparent;
      border-right: 3px solid transparent;
      position:absolute;
      bottom: 32px;
    }
    
    
    .ribbon-green:before {
      left: 0;
    }
    
    
    .ribbon-green:after {
      right: 0;
    }
    
  31. User Avatar
    Andrea D
    Permalink to comment#

    Is there any wordpress plugins that will produce this? What I am looking for is a way to add this into a blog page where the ribbon shows up only on the post excerpts page, where a shortcode can be added when creating the post that would generate the ribbon and text. If anyone knows of this please let me know.

  32. User Avatar
    Rafael
    Permalink to comment#

    Doesn’t work in IE 8

    :(

  33. User Avatar
    B. C.

    The ribbon tends to cover up the content under it – Is there a fix for this? Also, it would be great if the code could be cleaned up a little (use only 1 div to display the ribbon instead of 2.)

  34. User Avatar
    Diego E.
    Permalink to comment#

    Does anyone have a link to an example of this being used?

  35. User Avatar
    Marcel Halpert
    Permalink to comment#

    Thanks

  36. User Avatar
    Tim
    Permalink to comment#

    Worked like a charm in Rapidweaver 6

  37. User Avatar
    Dobom
    Permalink to comment#

    Thanks a lot! Works great!
    Saved time and lot’s of energy.

  38. User Avatar
    bitNate
    Permalink to comment#

    @Rafael, @Andrea D
    For this to work on IE you’ll also have to include the -ms- prefix

  39. User Avatar
    Jason
    Permalink to comment#

    All I see is a trapeze polygon rotated at 45 degrees.

    That’s 10 seconds of labour using this:

    http://www.thebequertools.com/

    Thanks.

  40. User Avatar
    Justine Win
    Permalink to comment#

    The ribbon is gone once I resize the browser to a smaller size :( I placed the ribbon inside a div. Any one knows how to fix this?

  41. User Avatar
    Marco Bax
    Permalink to comment#

    Thank you, this helped me a lot !

  42. User Avatar
    Ricky

    how to add post level(category) as corner ribbon to every post in home page of blogger?

  43. User Avatar
    Mat

    It is really cool. Thank you, it helped me a lot.

  44. User Avatar
    Julien
    Permalink to comment#

    Great code. What part do I change to make the ribbons thinner? I’ve tried changing some things here and there but nothing seems to be getting me a thinner ribbon. Thanks.

    • User Avatar
      spudgun3000
      Permalink to comment#

      look for ‘padding’ and reduce the value
      eg.
      padding: 16px 0;
      change to padding: 8px 0;

    • User Avatar
      Julien
      Permalink to comment#

      Woah how the hell did I miss this one?

      Thanks a lot :)

  45. User Avatar
    Krishna
    Permalink to comment#

    Thank you very much. It saved me a lot.

  46. User Avatar
    Krish nivi
    Permalink to comment#

    Hi chris i need to display slider image in the static web page please provide me a css code for it..
    i am a beginner

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag