How to Create a Simple, Lightweight HTML/CSS Ribbon (No JPG/PNG Image)

Here’s a simple, lightweight bit of HTML and CSS that creates a ribbon background with text, with no JPG or PNG image required.

Demo: CSS Ribbon for Your Website

HTML

Copy the code below and paste it into your HTML document.

<div class="ribbon">
    <span class="ribbon-text">My Ribbon</span>
</div>

CSS

Copy the code below and paste it into your CSS file.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
}
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

You can tweak the ribbon’s color and size. To change the color, replace blue in background and in both border declarations. If you change the height, set the 26px border width on :before and :after to half of the new height. Have fun!