CSS Ribbons - Wrapping Ribbons for Bootstrap 4

Learn Website Design and Development

CSS Ribbons - Wrapping Ribbons for Bootstrap 4

We have used variations of these ribbons many times across different websites. They work exceptionally well on pricing tables and pricing boxes to display information about a specific product. For instance, you may choose to use these to differentiate products that are new to your inventory, on sale, or discontinued. They can also be used to display enumerations such as the quantity of a product, the number of views on a video, the number of shares or likes on a blog post, etc.

Step 1: Create a Wrapper for Your Ribbons

The first step is to create a wrapper for your CSS ribbons. The wrapper is where you will define the height, width, and position of your ribbon. For our ribbons, we are positioning them on the top right corner of our div. This div could be a Bootstrap 4 card, an alert, or a Bootstrap 3 well. Anything works!

<div class="ribbon-wrapper">
</div>
.ribbon-wrapper {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px
}

Step 2: Create Your Ribbon

The second step is to create your inner ribbon. This is the div that will contain your ribbon text.

The main area of focus here is two-fold. We want to rotate our ribbon positive 45 deg to allow it to wrap around the top corner of the div. Rotating your ribbon will transform the ribbon as well as the text inside the div. If you want to include additional inline HTML inside your div such as an <i> or a <span>, make sure to add transform: rotate(45deg); to this inline HTML inside your CSS file.

The second area of focus is giving the ribbon a pseudo-3d effect to make it look as if it is "wrapping" around your container div. To achieve this effect, we are going to add a border to the CSS pseudo :after and :before. The border will mimic a drop shadow and have a top, left, and right property of 3px. The border-left property and the border-right property will have a transparent border color, while the top will be set to whatever color you choose that matches your ribbon's background color. Make sure that your border color is two to three shades darker than your ribbon's background color.

<div class="ribbon-wrapper">
    <div class="ribbon">New</div>
</div>
  .ribbon-wrapper {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px
}
.ribbon {
    font-size: 12px;
    color: #FFF;
    text-transform: uppercase;
    font-family: 'Montserrat Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: .05em;
    line-height: 15px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    padding: 7px 0;
    right: -11px;
    top: 10px;
    width: 100px;
    height: 28px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    background-color: #dedede;
    background-image: -webkit-linear-gradient(top, #ffffff 45%, #dedede 100%);
    background-image: -o-linear-gradient(top, #ffffff 45%, #dedede 100%);
    background-image: linear-gradient(to bottom, #ffffff 45%, #dedede 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdedede', GradientType=0)
}

.ribbon:before,
.ribbon:after {
    content: "";
    border-top: 3px solid #9e9e9e;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px
}

.ribbon:before {
    left: 0
}

.ribbon:after {
    right: 0
}
New

This is My Container Div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Step 3: Add Color Variations to Your Ribbons

The third step is to add color variations to your ribbons. This allows you to add context to your ribbons and differentiate your products or enumerations.

In order to accomplish this, we are going to add new classes for each ribbon variation. For us, we created a blue, green, and red ribbon with the classes, .ribbon.green, .ribbon.red, and .ribbon.blue.

For each color variation, you will want to change your ribbon's background color (in our case background gradient), your ribbon's border color, and your ribbon's border-top color in your CSS :before and :after properties.

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="ribbon-wrapper">
                <div class="ribbon green">New</div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="ribbon-wrapper">
                <div class="ribbon red">Sold</div>
            </div>
        </div>
    </div>


    <div class="col-md-4">
        <div class="card">
            <div class="ribbon-wrapper">
                <div class="ribbon blue">Sale</div>
            </div>
        </div>
    </div>
</div>
.ribbon.green {
    background-color: #2da285;
    background-image: -webkit-linear-gradient(top, #2da285 45%, #227a64 100%);
    background-image: -o-linear-gradient(top, #2da285 45%, #227a64 100%);
    background-image: linear-gradient(to bottom, #2da285 45%, #227a64 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff2da285', endColorstr='#ff227a64', GradientType=0)
}

.ribbon.green:before,
.ribbon.green:after {
    border-top: 3px solid #113e33
}

.ribbon.red {
    background-color: #bc1a3a;
    background-image: -webkit-linear-gradient(top, #a61733 45%, #bc1a3a 100%);
    background-image: -o-linear-gradient(top, #a61733 45%, #bc1a3a 100%);
    background-image: linear-gradient(to bottom, #a61733 45%, #bc1a3a 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffa61733', endColorstr='#ffbc1a3a', GradientType=0)
}

.ribbon.red:before,
.ribbon.red:after {
    border-top: 3px solid #8f142c
}


.ribbon.blue {
    background-color: #1a8bbc;
    background-image: -webkit-linear-gradient(top, #177aa6 45%, #1a8bbc 100%);
    background-image: -o-linear-gradient(top, #177aa6 45%, #1a8bbc 100%);
    background-image: linear-gradient(to bottom, #177aa6 45%, #1a8bbc 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#177aa6', endColorstr='#ff1a8bbc', GradientType=0)
}

.ribbon.blue:before,
.ribbon.blue:after {
    border-top: 3px solid #115979
}

New

This is My First Container Div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sold

This is My Second Container Div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sale

This is My Third Container Div

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.