Grow your CSS skills. Land your dream job.

Last updated on:

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;
}​

Reference URL

Comments

  1. 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. So much more flexible than using a static image. Super handy for such a commonly used design element. Very cool!

  3. 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. decrement
    Permalink to comment#

    Very nice approach. Thank you.

  5. 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. 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. thats very nice, thanks !

  8. Osama
    Permalink to comment#

    Thanks Its Amzing

  9. 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. Permalink to comment#

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

  11. 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. Franzi
    Permalink to comment#

    beautiful, that was what I needed :)

  13. Terry Wysocki
    Permalink to comment#

    How can I make the ribbon an active link?

  14. Kaustubh Kushte
    Permalink to comment#

    thanks.. it is very easy to implement :)

  15. 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. 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

    • 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.

    • Wildcats
      Permalink to comment#

      Any luck?

    • Chris
      Permalink to comment#

      .ribbon-wrapper-green

      change right to left.

      .ribbon-green

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

    • Brandon

      That worked, thanks!

  17. Aravind
    Permalink to comment#

    Thanks for this Chris.. Much appreciated..

  18. Permalink to comment#

    WOAH!! thats almighty Lovely..Thanx

  19. Callum Burns
    Permalink to comment#

    How do you go about making it bigger?

  20. Wildcats
    Permalink to comment#

    How to make the ribbon on top left corner?

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

    • 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. 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. 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. 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. 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. Great stuff!

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

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

    Awesome article. You are good.

  29. mond
    Permalink to comment#

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

  30. 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. 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. Permalink to comment#

    Doesn’t work in IE 8

    :(

  33. 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. Diego E.
    Permalink to comment#

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

  35. Marcel Halpert
    Permalink to comment#

    Thanks

  36. Tim
    Permalink to comment#

    Worked like a charm in Rapidweaver 6

  37. Dobom
    Permalink to comment#

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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