How to Create a Corner Ribbon

In this blog, we will show you how to create a corner ribbon with pure css code. Using a number of css properties such as: transform, box-shadow and position we’ll be able to create a css ribbon without using any images. CSS ribbons can be used when you want to display something important or eye catching to the user, such as, if you would like to show something is popular or new to your website. We have also created a CSS Ribbon Generator so that you can create these ribbons visually.

Lets have a look at the code, the following is the html code that we will use.

<div class="box">
    <div class="ribbon"><span>Popular</span></div>
</div>

The above code will display a ‘box’ for the ribbon to wrap around.

Now the CSS code that will give the above some style.

.box {
   width:200px;height:300px;
   position:relative;
   border:1px solid #BBB;
   background:#eee;
}
.ribbon {
   position: absolute;
   right: -5px; top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}
.ribbon span {
   font-size: 10px;
   color: #fff; 
   text-transform: uppercase; 
   text-align: center;
   font-weight: bold; line-height: 20px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); /* Needed for Safari */
   width: 100px; display: block;
   background: #79A70A;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 19px; right: -21px;
}

Here you will see three classes, they are:
.box – The box class simply displays a container that we use to add our ribbon to.
.ribbon – With this class, we need to set the ribbon position to absolute, this will make the ribbon display in the upper right hand corner of our container.
.ribbon span – This class is where the main code is used to display the ribbon, here we transform our text to display at a 45 degree angle, the background has a gradient added, the text is transformed to uppercase and a shadow is added to the ribbon.

.ribbon span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}

The above two css code snippets use the pseudo-class ::before and ::after, by using these classes, it will create a ‘wrap-around’ of the ribbon, giving it a bit of a 3d look.

.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);}
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;}
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;}

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}

Changing the background color of the ribbon is very easy, with the above two code snippets, you will be able to change the background to either red or blue. You can also create any color that you would like by using our CSS Ribbon Generator.

To check out a demo of this blog, please click the button below.

Demo