Creating a CSS ribbon

In this tutorial I am going to discuss all about creating a 3D ribbon with CSS. It can be used as the headers of different widgets of a website or a blog. Before learning this tutorial you need to have some basic concept about CSS pseudo elements :before and :after and of course some of the basic knowledge of CSS style properties.

For the sake of simplicity I have divided this tutorial into three segments. Go through one by one for better understanding. You may not have any idea about CSS RIBBON yet, following is a screenshot with the numbered segments of what we are going to create in this tutorial.

Demo

The HTML markup used

The minimal HTML required for this tutorial

<html>
  <body>
    <div id="ribbon">
      <div id="ribbonedge">RIBBON</div>
    </div>
  </body>
</html>

Part 1

As shown in the above screenshot, we are going to create the body of the RIBBON in the first segment. For this we have to implement the following CSS code

#ribbon {
  margin: 80px auto;
  width: 700px;
  height: 60px;
  background:#F96464;
  position: relative;
}

#ribbonedge {
  color: #ffffff; 
  font-family:Segoe UI; 
  text-align: center; 
  font-size: 40px;
}

Nothing to explain in this part of CSS, these are the basic style properties of CSS. If you are still not finding it hard to understand, then you can ask me.

Part 2

In this part we are going to create the shadows, for which the RIBBON looks like 3D. For this we have used the following CSS

#ribbon:before {
  content:"";
  width: 0px;
  height: 0px;
  position:absolute;
  top: 30px;
  left: 0px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 30px solid #C13B3B;
  z-index: -1;
}
#ribbon:after {
  content:"";
  width: 0px;
  height: 0px;
  position:absolute;
  top: 30px;
  right: 0px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #C13B3B;
  z-index: -1;
}

In the above CSS, we are using the CSS pseudo element before: and after: to create the shadows under the RIBBON body. We first set the width and height to zero and a position absolute, after that applied different border styles in three different sides and finally get the shadows as a result.

Part 3

This is the final segment of the tutorial, in this part we have used the following CSS

#ribbonedge:before {
  content:"";
  width: 0px;
  height: 0px;
  border-top: 28px solid #F04D4D;
  border-bottom: 28px solid #F04D4D;
  border-right: 60px solid #F04D4D;
  border-left: 28px solid transparent;
  position:absolute;
  top: 33px;
  left: -58px;
  z-index: -2;
}

#ribbonedge:after {
  content:"";
  width: 0px;
  height: 0px;
  border-top: 28px solid #F04D4D;
  border-bottom: 28px solid #F04D4D;
  border-left: 60px solid #F04D4D;
  border-right: 28px solid transparent;
  position:absolute;
  top: 33px;
  right: -58px;
  z-index: -2;
}

In this part we have basically created the final edge of the RIBBON, which has been shown in the above screenshot. This is almost the same code written in Part 2, only difference lies in the border width, color and of course the absolute positioning.

Though I have explained a little bit about how the RIBBON has been created, you need a good command on CSS basics to understand this tutorial well. Give a close look to the code and try to understand. You can also manipulate the code in your own way.

Codeflaps