Create a Simple Ribbon With CSS

In this example, we will create a simple Ribbon using CSS.



Step 1: First we will create the main div, in which the ribbon will appear:

<div class="main">

</div>

 

.main {

margin: 0px auto;

width: 400px;

background-image:url('wooden2.jpg');

-moz-border-radius: 10px;

  -khtml-border-radius: 10px;

  -webkit-border-radius: 10px;

position: relative;

z-index: 80;

}

Here we set the background of the div and rounded corner using the radius property and set the z-index property (this property is useful to display the div under the ribbon).

Step 2: Now we will create a ribbon using the <div> tag like this:

<div class="main">
<div class="ribbon"><h2 align="center" style="color:Tan;">CSS</h2></div>
<div class="ribbon-left"></div>
<div class="ribbon-right"></div>
<div style="padding: 60px 25px 35px 25px;Color:wheat;">

<p >
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. From Wikipedia</p>

</div>

</div>

Here we will specify three div elements (the first one shows the front part of the ribbon, the second will show the left part and the third will show the right part of the ribbon).

First we will set the property of the front part of the ribbon:
 

<div class="ribbon"><h2 align="center" style="color:Tan;">CSS</h2></div>

 

.ribbon {

background-image:url('wooden1.jpg');

height: 50px;

 

width: 430px;-moz-border-radius: 2px;

  -moz-border-radius: 2px;

  -khtml-border-radius: 2px;

  -webkit-border-radius: 2px;

position: relative;

left:-15px;

top: 40px;

float: left;

z-index: 100; 

}

Here we will set the background Image, radius just like our main div and set the z-index property to 100 (Note that, the z-index property of the main div is 80) so the main div will be appear under the ribbon.

Now we will write the code for the left and right part of the ribbon:

.ribbon-left {
border-color: transparent #FF9966 transparent transparent;
border-style:solid;
border-width:15px;
background-image:url('wooden1.jpg');
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1;
}

.ribbon-right {
border-color: transparent transparent transparent #FF9966;
border-style:solid;
background-image:url('wooden1.jpg');
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 400px;
top: 35px;
z-index: -1;
}

Here we will set the z-index property to -1. So they will appear under the div. Here we will aslo set the left and top position of the div. Which will be helpful to show that part under the main div.