Edit in JSFiddle

/* 

NOTE 1

IE 6 and IE 7 need hasLayout to be triggered on the h1.
This will tidy up some slightly ugly rendering that is
consequence of using the negative margins.

This CSS declaration could be moved into your
conditional IE style sheet if you use one.


NOTE 2

The {z-index:-1} declaration for the pseudo-elements is
to push them behind the element they are generated from.
This is only necessary because in this enhanced example
a CSS box-shadow is being used to add a slight sense of
depth to the effect.

However, this does introduce a slight problem that can
be corrected by the technique described in "NOTE 3".


NOTE 3

The {position:relative; z-index:1} declarations used on
.container are useful when also using z-index:-1 on the 
pseudo-element. They will prevent the pseudo-elements 
from falling behind any ancestors further up the 
document tree that have background colours of their own.
       
As an experiment:

1. In the HTML above, wrap the .container div 
   with <div class="wrapper"></div>.

2. In the CSS to the right, add the following:

   .wrapper {background:#e5e5e5;}

   and remove the following from .container:

   position:relative;
   z-index:1;

3. Click "run" in the toolbar above. You should notice
   that the pseudo-elements have disappeared. This is 
   because they have fallen behind your "wrapper" div.
   
4. To bring them back, add the {position:relative; 
   z-index:1;} code back to .container. Click "run"

*/

<div class="container">
    <h1>Simple CSS ribbon</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing arcu vitae lacus porta ac pellentesque massa lobortis. In arcu tortor, sagittis ac laoreet sit amet, euismod a odio.</p>
    <p>Vestibulum sit amet quam eu libero ultrices bibendum et quis massa. Quisque vestibulum semper neque a sollicitudin. Duis cursus volutpat dolor in dictum. Maecenas iaculis diam ut lacus hendrerit in fermentum augue interdum. Maecenas venenatis felis sapien, sit amet pulvinar massa.</p>
</div>

body {
    padding:0;
    font:15px/1.4 Arial, sans-serif;
    background:#e5e5e5;
}

p {
    margin:1.4em 0 0;
}

.container {
    /* See "NOTE 3" */
    position:relative;
    z-index:1;
    width:300px;
    padding:20px;
    margin:20px auto;
    background:#fff;
}

.container h1 {
    position:relative;
    padding:10px 30px;
    margin:0 -30px 20px;
    font-size:28px;
    line-height:32px;
    font-weight:bold;
    text-align:center;
    color:#fff;
    background:#87A800;
    /* css3 extras */
    text-shadow:0 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.2);
    /* See "NOTE 1" */
    zoom:1;
}

.container h1:before,
.container h1:after {
    content:"";
    position:absolute;
    /* See "NOTE 2" */
    z-index:-1;
    top:100%;
    left:0;
    border-width:0 10px 10px 0;
    border-style:solid;
    border-color:transparent #647D01;
}

.container h1:after {
    left:auto;
    right:0;
    border-width:0 0 10px 10px;
}