Scribd Logo
Upload

Welcome to Scribd!

  • Ribbon

    Uploaded by

    Vishal Kumar
    6 views1 page
    Create Ribbon Using HTML and CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Create Ribbon Using HTML and CSS

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views1 page

    Ribbon

    Uploaded by

    Vishal Kumar
    Create Ribbon Using HTML and CSS

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .css-ribbon { font-size: 16px !important; width: 50%; position: relative; backgr
    ound: #B23D96; color: #fff; text-align: center; padding: 1em 2em; margin: 2em au
    to 3em; }
    .css-ribbon:before, .css-ribbon:after { content: ""; position: absolute; display
    : block; bottom: -1em; border: 1.5em solid #D469BE; z-index: -1; } .css-ribbon:b
    efore { left: -2em; border-right-width: 1.5em; border-left-color: transparent; }
    .css-ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: t
    ransparent; }
    .css-ribbon .css-ribbon-content:before, .css-ribbon .css-ribbon-content:after {
    content: ""; position: absolute; display: block; border-style: solid; border-col
    or: #804f7c transparent transparent transparent; bottom: -1em;}
    .css-ribbon .css-ribbon-content:before {left: 0;border-width: 1em 0 0 1em;}
    .css-ribbon .css-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="css-ribbon">
    <strong class="css-ribbon-content">Events</strong>
    </h1>
    </div>
    </body>
    </html>

    You might also like