HTML

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

CSS

#ribbon {
position: relative;
top:40px;
left:-20px;
width: 960px;
height:100px;
background-color: #999;
float: left;
-webkit-box-shadow: 0px 0px 2px #000;
-moz-box-shadow: 0px 0px 2px #000;
-o-box-shadow: 0px 0px 2px #000;
box-shadow: 0px 0px 2px #000;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
border-bottom: 1px solid #000;
}

#ribbon:before {
z-index: -1;
position: absolute;
top:10px;
left:0;
width: 20px;
height: 101px;
content: '';
background-color: #444;
-webkit-transform: skewY(45deg);
-moz-transform: skewY(45deg);
-o-transform: skewY(45deg);
transform: skewY(45deg);
-webkit-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
-moz-box-shadow: inset 1px -1px 2px #000, 1px 1px 3px #000;
-o-box-shadow: inset 1px -1px 2px #000, 1px 1px 3px #000;
box-shadow: inset 1px -1px 2px #000, 1px 1px 3px #000;
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
}

#ribbon:after {
z-index: -2;
position: absolute;
top:10px;
right:0;
width: 20px;
height: 101px;
content: '';
background-color: #444;
-webkit-transform: skewY(-45deg);
-moz-transform: skewY(-45deg);
-o-transform: skewY(-45deg);
transform: skewY(-45deg);
-webkit-box-shadow: inset 1px -1px 3px #000, 1px 1px 3px #000;
-moz-box-shadow: inset 1px -1px 2px #000, 1px 1px 3px #000;
-o-box-shadow: inset 1px -1px 2px #000, 1px 1px 3px #000;
box-shadow: inset 1px -1px 2px #000, 1px 1px 3px #000;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
}


Tweet

updated 01/01/11 - added the code section so you don't have to view source.

updated 02/01/11 - fixed a typo. Thanks to - donroyc0

updated 02/01/11 - tested on some browsers in Microsoft XP.

"nobody can eat fifty eggs..."

You can even do it vertically :D