How to Create a Corner Ribbon

posted in: Tutorials | 0

Create a corner ribbon with pure css code and 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.

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

 

ribbon

 

 

Popular

The above code will display a ‘box’ for the ribbon to wrap around.
Now the CSS code that will give the above some style.

 

 

 

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.

 


 

 

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.

 

 

 

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.

 

 

View on Booply

 

Leave a Reply