Creating the 3D ribbon in css

i am little confused how to make the 3d ribbon as show bellow.

my layout is 980px wide and the ribbon extends a little more than that to the left. how is it done… can some one help me

Hi,
That would be easy to do by setting the left ribbon image as position:absolute;

The trick is to set position:relative; on your header div to establish the containing block for the AP image.

Then just position it and give it a width and height the same as the side image and of course set the image as a BG image.

Something like this -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<style type="text/css">
#header {
    width:900px;
    height:200px;
    padding-top:1px;
    margin:0 auto;
    background:#000;
    position:relative;
}
#go{
    height:50px;
    margin-top:49px;
    background:yellow;
}
#ribbon{
    position:absolute;
    width:25px;
    height:75px;
    top:50px;
    left:-25px;
    background:red url(ribbon.jpg);
}
</style>
</head>
<body>

<div id="header">
    <div id="go"></div>
    <div id="ribbon"></div>
</div>

</body>
</html>

thanx buddy… will try it… and get back to u

It should work just fine for you.

Here is a pure css version just for grins :smiley:

It uses borders for the ribbon shadow and arrow.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Ribbon Banner</title>
<style type="text/css">
body{
    font-family:"courier new",georgia,arial;
    background:#DDD;
}
h1{margin:0;padding:0;}

#header {
    width:900px;
    height:200px;
    padding-top:1px;
    margin:30px auto;
    background:#000;
    border:4px solid red;
    position:relative;
}
#banner{
    float:left;
    height:50px;
    line-height:50px;
    width:850px;
    margin-top:49px;
    background:orange;
    text-align:center;
}
#banner b{
    float:right;
    height:0;
    width:0;
    margin-right:-25px;
    border-top:25px solid transparent;
    border-bottom:25px solid transparent;
    border-left:25px solid orange;
}
#banner em{
    font:bold 2.25em/50px georgia;
    float:right;
}
#shadow{
    position:absolute;
    width:0;
    height:50px;
    top:50px;
    left:-25px;
    border-right:25px solid #444;
    border-bottom:25px solid transparent;
}
#shadow b{
    position:absolute;
    width:25px;
    height:50px;
    left:0;
    background:orange;
}
</style>
</head>
<body>
<div id="header">
    <div id="banner">
        <b></b><em>GO &raquo;</em>
        <h1>CSS Ribbon Banner using Borders</h1>
    </div>
    <div id="shadow"><b></b></div>
</div>

</body>
</html>

thanx a lot. loved ur site. bookmarked it :smiley: