Create Simple 3D Ribbon With CSS3

CSS3 is one of the design languages i like to play around with. We have shared many CSS3 tutorials, but these 3D ribbon effect happens to be one of the CSS3 tutorials we personally like.
I was a bit amazed the first time i saw ribbon on a blog, though it was an image. So i just thought i should create one using pure CSS due to my hate for using image in design if CSS can handle it.
In this tutorial, we will be creating an awesome 3D ribbon with a shadow effect.

The HTML Markup

<div class="container">
<div class="rectangle"><h2>3D CSS3 Ribbon</h2></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
<div class="info">
<h2>WOW! This is Awesome.</h2>
<p>
I Created these awesome ribbon using pure CSS and few HTML markup. Hope you love it? But be aware that it doesn't work in IE due to its poor support for CSS3.
</p>
</div>
</div>
</div>

The CSS Markup

Firstly, i create a container which the ribbon will need to wrap.

.container {
    clear: both;
    margin: 0px auto;
    width: 350px;
    background: #fff;
    -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    position: relative;
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

Now, this is the CSS code for the ribbon.

.rectangle {
    background: #04979c;
    height: 50px;
    width: 380px;
    position: relative;
    left:-15px;
    top: 30px;
    float: left;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
    font-size: 28px;
    color: #fff;
    margin-top: 7px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    text-align: center;
}

.triangle-left {
    border-color: transparent #01878c transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: -30px;
    top: 65px;
    z-index: -1; /* displayed under bubble */
}

.triangle-right {
    border-color: transparent transparent transparent #01878c;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: 350px;
    top: 35px;
    z-index: -1; /* displayed under bubble */
}

.info {
    padding: 30px 25px 35px 25px;
}

.info h2 {
    font-size: 20px;
        text-align: center;
}

.info p {
    padding-top: 10px;
    font-size: 14px;
    line-height: 22px;
}

The final result should look like the following screenshot. Take a look at it, you should understand how the structure was formed. You can also make use of our HTML Editor for better customization.

If you need any further help, don't hesitate to ask in the comment.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz