Create Ribbon Effect with Transform Property in CSS

In this snippet, we will learn how to create a ribbon effect with transform property in CSS3.

Ribbons are widely used in web design these days. They are used to add decorative elements to websites and enhance the overall look and feel of the site. Ribbons can be created using different HTML5 and CSS3 properties.

In this tutorial, we will use the transform property to create a ribbon effect. Transform property is used to scale, rotate, skew and translate elements. It is widely supported by all modern browsers.

<div class="outer">
    <div class="ribbon">FREE</div>
</div>

<style type="text/css">
.outer{
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

.outer .ribbon{
    position: absolute;
    right: -33px;
    background: green;
    width: 134px;
    height: 25px;
    transform: rotate(45deg);
    -webkit-box-shadow: 0 0 10px #888;
    -moz-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
    color: white;
    text-align: center;
    padding: 5px 0 0 0;
    top: 20px;
    overflow: hidden;
    white-space: nowrap;
}
</style>

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close