How to Create Ribbon using CSS

In this tutorial i am going to explain how to create Ribbon using CSS. While you working of any project and design webpage there may it is required to design logo of product and if you want want to design logo with ribbon so you can create ribbon by using css style. Now i am working on one of the live project of North Star School and i got same requirement to design logo of school with ribbon and use logo in to website.

So, Let's Create one HTML page to Demonstration Purpose:
First You need to write css in between <style> tag within <head> tag.
After complete css you need to apply css class in to html control just like :

HTML Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .ribbon {
            font-size: 16px !important;
            width: 300px;
            position: relative;
            background: #C50F0F;
            color: #fff;
            text-align: center;
            padding: 1em 2em;
            margin: 2em auto 3em;
        }
 
            .ribbon:before, .ribbon:after {
                content: "";
                position: absolute;
                display: block;
                bottom: -1em;
                border: 1.5em solid #B41111;
                z-index: -1;
            }
 
            .ribbon:before {
                left: -2em;
                border-right-width: 1.5em;
                border-left-color: transparent;
            }
 
            .ribbon:after {
                right: -2em;
                border-left-width: 1.5em;
                border-right-color: transparent;
            }
 
            .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
                content: "";
                position: absolute;
                display: block;
                border-style: solid;
                border-color: #804f7c transparent transparent transparent;
                bottom: -1em;
            }
 
            .ribbon .ribbon-content:before {
                left: 0;
                border-width: 1em 0 0 1em;
            }
 
            .ribbon .ribbon-content:after {
                right: 0;
                border-width: 1em 1em 0 0;
            }
 
        .non-semantic-protector {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="non-semantic-protector">
        <h1 class="ribbon">
            <strong class="ribbon-content">WWW.ASPPOINT.COM</strong>
        </h1>
        <center>
            <p>Developed By: Nikunj Satasiya</p>
            <br />
            <p>
                Copyright © 2016 asppoint.com All Right Reserved.
            </p>
        </center>
     </div>
</body>
</html>

Demo:

Download Sample Code:

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza

How to Create Ribbon using CSS

About Nikunj Satasiya

Related Post