Hello readers here is a simple line of code that will give your page a new look using a corner ribbon tag... it will help you to add ribbon aside of your working area by using pure CSS code. You can use this code whenever you want to display something important and making it eye catching for the user.

HTML CODE:

<div class="box">
       <div class="ribbon"><span>Best Wishes</span></div>
    </div> 

CSS:

      .box {
               width:200px;height:200px;
               position:relative;
               border:1px solid #BBB;
               background:#eee;
               margin-top: 20px;
               margin-left: 80px;

            }
            .ribbon {
               position: absolute;
               right: -3px; top: -1px;
               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);
               width: 100px; display: block;
               background: #79A70A;
               box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
               position: absolute;
               top: 19px; right: -21px;
            }