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.
You need to be a part of a contest for one of the best sites online.
I am going to highly recommend this blog!
Hi Rene,
Thanks for an excellent and very useful piece of code!
I have one request… would it be possible to add a line height option to the generator?
I need to put an icon on the ribbon that is 24pixels high (making the icon smaller loses it’s quality of detail).
I spent some time playing with lineheight and width’s etc but just cant seem to get it looking right. The 3d effect gets lost when you only adjust the lineheight.
If it’s too much work to adapt the generator, maybe you coud give me a tip on how to make it with a lineheight of 28px?
I would really appreciate your help!
Thanks
Regards
Brent
Hi Brent,
Sorry for not getting back to you sooner, but I have been on holidays. To achieve a line-height of 28px just change the following code:
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 100px; height: 100px;
text-align: right;
}
.ribbon span {
font-size: 10px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold; line-height: 28px;
transform: rotate(45deg);
width: 125px; 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: 21px; right: -27px;
}
I hope this helps.
thanks its very good but when you have like 2 words or more to put in this exact one is useless or you have to play around with top and right values in span
but thanks a lot again
Adam
Nice code!
Seems safari doesnt work, anybody test this yet on safari?
I see it perfectly on chrome but safari shows the banner as a straight banner, horizontal, no rotation, no corners.
Any idea?
Hi Thomas,
It should be working for Safari now. The problem was the transform property, Safari does not support it. However, using the vendor prefix -webkit-transform it is now working correctly. I have updated the code.
Very Nice 🙂 , thanks
Great piece of code! Thank you!!
how to add post level(category) as corner ribbon to every post in home page of blogger?
Thank you , it is very beautiful…