Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to Create a Corner Ribbon With The Help Of Css

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.15k
    Comment on it

    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>

    Below is the css code for corner ribbon.

    .main_div {
       border:2px solid #000;
    .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 :-

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: