<!-- The HTML -->
<div class="ribbon">
   lorem ipsum dolor sit amet.
   <span class="left"></span>
   <span class="right"></span>
</div>

/* The CSS */
.ribbon {
    background-color:#999;
    background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,.1));
    background-image:-moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,.1));
    background-image:linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,.1));
    height:40px;
    margin:0 40px;
    color:#fff;
    font:bold 12px/40px sans-serif;
    text-align:center;
    text-shadow:0 1px #666;
    position:relative;
    -webkit-box-shadow:
        0 1px 3px rgba(0,0,0,.3),
        0 0 0 1px #777,
        0 1px 0 #bbb inset;
    -moz-box-shadow:
        0 1px 3px rgba(0,0,0,.3),
        0 0 0 1px #777,
        0 1px 0 #bbb inset;
    box-shadow:
        0 1px 3px rgba(0,0,0,.3),
        0 0 0 1px #777,
        0 1px 0 #bbb inset;
    }
.ribbon:before, .ribbon:after {
    content:'';
    border:6px solid transparent;
    position:absolute;
    display:block;
    width:0;
    height:0;
    top:100%;
    }
.ribbon:before{
    left:0;
    border-top-color:#666;
    border-left-width:7px;
    border-right-width:0;
    }
.ribbon:after {
    right:0;
    border-top-color:#666;
    border-right-width:7px;
    border-left-width:0;
    }
.ribbon .right, .ribbon .left{
    border:19px solid #999;
    position:absolute;
    display:block;
    width:0; height:0;
    top:7px;
    z-index:-1;
    }
.ribbon .right {
    -webkit-box-shadow:
        0 1px 0 #777,
        0 -1px 0 #bbb,
        0 -2px 0 #777,
        1px 0 0 #777;
    -moz-box-shadow:
        0 1px 0 #777,
        0 -1px 0 #bbb,
        0 -2px 0 #777,
        1px 0 0 #777;
    box-shadow:
        0 1px 0 #777,
        0 -1px 0 #bbb,
        0 -2px 0 #777,
        1px 0 0 #777;
    border-left-color:transparent;
    left:-32px;
    }
.ribbon .left {
    -webkit-box-shadow:
        0 1px 0 #777,
        0 -1px 0 #bbb,
        0 -2px 0 #777,
        -1px 0 0 #777;
    -moz-box-shadow:
        0 1px 0 #777,
        0 -1px 0 #bbb,
        0 -2px 0 #777,
        -1px 0 0 #777;
    box-shadow:
        0 1px 0 #777,
        0 -1px 0 #bbb,
        0 -2px 0 #777,
        -1px 0 0 #777;
    border-right-color:transparent;
    right:-32px;
    }

A simple pure CSS3 ribbon. I wanted to use a gradient on the borders, But after trial and error I decided it would be best not to. Although it could be done if you have a solid color background.

Preview:

Fiddle

Thank you.