Pure CSS Ribbon Banner

Every now and then, I set a coding challenge for myself that may be a bit unrealistic, just to see if I can accomplish it. It helps me grow as a developer, both because I have to be creative and because it usually necessitates some research. Today, the challenge is to create a ribbon banner with pure css and html. No images allowed.

Creating visual elements without images is not only a good idea—it's fast becoming necessary. With the advent of "retina" screens and the like, raster-based images are on their way out for UI elements all over the web because they look terrible on high resolution displays. Because of this, we web designers are starting to re-assess the way we create these elements. Certain situations call for an image, and SVG (Scalable Vector Graphic) is fast becoming the go-to format for this. However, when we can avoid the image altogether, we not only get a beautiful, crisp element—we also avoid the extra request. Let's get going on this sucker.

Disclaimer: If you're a CSS Newbie, I would recommend reading up on a few things before attempting this, as I'm not going to coddle you:

First, here's the markup:

html
<div class="content-box">
   <div id="ribbon-container">
      <a href="demos/pure-css-ribbon-banner.html#" id="ribbon">here's your link</a>
   </div>
</div>

See the Pen dd4662faf03caf7a3ea59ae59d55235b by Jesse Couch (@designcouch) on CodePen.

What you see above is very simple stuff. The div ".content-box" is your content area. The div "#ribbon-container" holds in the anchor, and allows us to give both positioning and part of our drop-shadow to the banner. The anchor (obviously) is your link, and the main visual element in our banner.

We good so far? Ok. Let's move on to the CSS.

css
* {
  padding: 0;
  /* Standard Reset, and we're adding box-sizing:border-box because it's awesome. */
  
  margin: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
}

.content-box {
  width: 100%;
  height: 400px;
  max-width:80%;
  margin: 50px auto;
  position: relative;
  /* So we can position the banner within the box */
  
  background: gray;
  border: 5px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

#ribbon-container {
  position: absolute;
  top: 15px;
  right: -20px;
  overflow: visible;
  /* so we can see the pseudo-elements we're going to add to the anchor */
  
  font-size: 18px;
  /* font-size and line-height must be equal so we can account for the height of the banner */
  
  line-height: 18px;
}

#ribbon-container:before {
  content: "";
  height: 0;
  width: 0;
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  border-top: 29px solid rgba(0, 0, 0, .3);
  /* These 4 border properties create the first part of our drop-shadow */
  
  border-bottom: 29px solid rgba(0, 0, 0, .3);
  border-right: 29px solid rgba(0, 0, 0, .3);
  border-left: 29px solid transparent;
}

#ribbon-container:after {
  /* This adds the second part of our dropshadow */
  
  content: "";
  height: 3px;
  background: rgba(0, 0, 0, .3);
  display: block;
  position: absolute;
  bottom: -3px;
  left: 58px;
  right: 3px;
}

#ribbon-container a {
  display: block;
  padding: 20px;
  position: relative;
  /* allows us to position our pseudo-elements properly */
  
  background: #0089d0;
  overflow: visible;
  height: 58px;
  margin-left: 29px;
  color: #fff;
  text-decoration: none;
}

#ribbon-container a:after {
  /* this creates the "folded" part of our ribbon */
  
  content: "";
  height: 0;
  width: 0;
  display: block;
  position: absolute;
  bottom: -15px;
  right: 0;
  border-top: 15px solid #004a70;
  border-right: 15px solid transparent;
}

#ribbon-container a:before {
  /* this creates the "forked" part of our ribbon */
  
  content: "";
  height: 0;
  width: 0;
  display: block;
  position: absolute;
  top: 0;
  left: -29px;
  border-top: 29px solid #0089d0;
  border-bottom: 29px solid #0089d0;
  border-right: 29px solid transparent;
  border-left: 29px solid transparent;
}

#ribbon-container a:hover {
  background: #009ff1;
}

#ribbon-container a:hover:before {
  /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
  
  border-top: 29px solid #009ff1;
  border-bottom: 29px solid #009ff1;
}

See the Pen dd4662faf03caf7a3ea59ae59d55235b by Jesse Couch (@designcouch) on CodePen.

Ok ok—enough of that. Did you follow it all? Just in case, let's do a brief overview.

First, we're using the universal selector to do a basic reset and add box-sizing:border-box to our page. This allows for us to specify our margins, padding and widths without having to do too much fancy math.

Next, we're adding visual style to the ribbon container, and the ribbon itself. Again, basic stuff.

The important stuff to pay attention to is what is being done with the :before and :after pseudo-elements. This technique is how we're managing to avoid images in our ribbon.

And that's all there is to that. A pure CSS ribbon banner using no images whatsoever. You. Are. Welcome.

demo

See the Pen dd4662faf03caf7a3ea59ae59d55235b by Jesse Couch (@designcouch) on CodePen.

Did I help you out?

Read More

←  Why not Wordpress? Where is Apple's Mobile Site?  →

There are 25 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Jacob

    Jacob

    Mar 27, 2013

    Great tutorial. And on a broader note, great site. The emphasis on readability and typography are immediately apparent and very effective. Hope to see more sites like this in the future!

    Reply to Jacob

  2. Tom

    Tom

    Apr 22, 2013

    This is a great tutorial, thanks! As soon as I saw the demo, in which you posted the link on another site, I thought, "that's exactly what I am going to use for a new project"!

    Thanks again for the tutorial and the inspiration!

    Reply to Tom

    1. Jesse

      Jesse

      Apr 23, 2013

      Very glad I could be of help, Tom. If you have any further questions on how to pull this off, please let me know—I'd be glad to assist!

  3. Andrae Brone

    Andrae Brone

    Sep 24, 2013

    I like it gonna be even happier when I get it to work.

    -Andrae

    Reply to Andrae

    1. Jesse

      Jesse

      Sep 24, 2013

      If you care to specify what your troubles are, I'll be glad to try and help!

  4. elisa

    elisa

    Oct 31, 2013

    OH! it clicked! You are using the css triangle principle to shape the folds and the forks. Can't wait to give this a try!

    Reply to elisa

    1. Jesse

      Jesse

      Nov 01, 2013

      Glad I could be of help, Elisa! Yes, CSS Triangles can be used for a very large variety of interesting things. I just used them the other day to create a really sweet star shape.

  5. Brian

    Brian

    Nov 21, 2013

    This is just what I was needing for my site. And it works in ie8! May I suggest that adding the color to the #ribbon-container a:before on the border-right, like this:
    border-right: 29px solid #0089d0 transparent;
    will hide the triangular outlines in firefox and still look great in other browsers.
    Keep up the great work!

    Reply to Brian

    1. Jesse

      Jesse

      Nov 21, 2013

      That's a great suggestion, Brian, and I'm glad I was able to help you out. Good luck with your site!

  6. RASHEDUL ISLAM

    RASHEDUL ISLAM

    Apr 07, 2014

    just awesome, want more

    Reply to RASHEDUL

    1. Jesse

      Jesse

      Apr 07, 2014

      Thanks, Rashedul - I'm really glad you enjoyed it! If you've got something specific you'd be interested in seeing, I'm about to get going on a few blog posts, and would be glad to add yours to the list.

  7. Dan

    Dan

    Aug 13, 2014

    Copy-pasted the code, worked like a charm. Now on our store home page. Add a Paypal button for people to show appreciation?

    Reply to Dan

    1. Jesse

      Jesse

      Aug 21, 2014

      Glad I could assist! Paypal button was a good suggestion. I've added it to all the articles on my site.

  8. Janet

    Janet

    Sep 02, 2014

    Is there a way to make the ribbon "bleed" outside the main content container of a website that is responsive using a 960 grid, (12 column) sort of like bootstrap with the




    I've tried and I either get the bleed working, but the responsive breaks or I get the responsive working and the bleed breaks! Any ideas?

    Reply to Janet

    1. Jesse

      Jesse

      Sep 03, 2014

      Janet, it appears that part of your comment was cut out. Could you re-post it?

  9. John

    John

    Oct 14, 2014

    Hi,

    nice ribbon! What is the syntax to put it on an image?


    Reply to John

    1. Jesse

      Jesse

      Oct 15, 2014

      Glad you like it, John. Putting the ribbon on an image would be a simple matter of placing said image within the div with the class "content-box", and making sure the box and image were styled to be the same size. Since images are not block elements, or capable of containing any other elements, you need the container div. Any further questions, just let me know!

    2. John

      John

      Oct 15, 2014

      I found out that you don't need to specify sizes, specify this:

      .content-box {
      position: relative;
      display: inline-block;
      }

      will wrap the image and fill up the div. Then the ribbon will be well placed.

  10. Joe

    Joe

    Oct 29, 2014

    This is exactly what I was looking for.
    One question how would I code it if I wanted it to be located on the left side rather than the right side?

    Great job, thank you!

    Reply to Joe

    1. Jesse

      Jesse

      Oct 30, 2014

      Glad I was able to help! There are several things that you would need to do, but they all relate to adjusting positioning. For instance, the ribbon container (#ribbon-container in the CSS) is positioned -20px from the right side of its parent. Simply change this declaration from right to left in the CSS, and the container will shift. Hope this gets you started down the right path!

  11. Rashedul Islam

    Rashedul Islam

    Dec 31, 2014

    awesome csss man

    Reply to Rashedul

  12. huseyin

    huseyin

    Sep 21, 2016

    how can i resize this ribbon?

    Reply to huseyin

  13. Mishuk

    Mishuk

    Mar 17, 2017

    Hi Just Awesome, wonderful

    Reply to Mishuk

  14. Jack Snow

    Jack Snow

    Aug 14, 2017

    Thanks for your great article, but the demo doesn't work. My browser is Chrome.

    Reply to Jack

  15. You are completely right, I enjoyed readying your marvelous post! Hope it helps others as well. Your support is appreciated!

    Reply to look