In this blog, I am going to demonstrate to you proper methodologies to make a corner ribbon with the help of css by utilizing various css properties for example  with the help of transform, box-shadow and position we can make corner ribbon without using any image.

We use corner ribbons when we want to show something important and we want that every body notice it. For example if we are introducing  something new to our website than we can use corner ribbon by which every body notice it.

Below html code is used for creating corner ribbon.

<div class="main_div">
    <div class="red_ribbon"><span>Popular</span></div>
</div>

Below is the css code for corner ribbon.

.main_div {
   width:300px;height:300px;
   position:relative;
   border:2px solid #000;
   background:grey;
}
.red_ribbon {
   position: absolute;
   right: -6px; top: -6px;
   z-index: 1;
   overflow: hidden;
   width: 80px; height: 80px; 
   text-align: right;
}
.red_ribbon span {
   font-size: 15px;
   color: #fff; 
   text-align: center;
   font-weight: bold; line-height: 22px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); 
   width: 110px; display: block;
   background: #1C90F3;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 20px; right: -22px;
}

.main_div – This class basically shows a container that is used to hold our ribbon. 

.red_ribbon –  this class will help us in setting the position of our ribbon we have to set the ribbon position to absolute by which we can make it to display on right corner of the container.

.red_ribbon span  – This class is the place where the main code is utilized to show the ribbon, here we are transforming the text adding the background gradient.

Working demo :- https://jsfiddle.net/0jjge2a8/6/