CSS Ribbons

For Example, CSS Ribbons Content...

Demo

HTML

<div class="ribbon">
    <p>
        <strong class="ribbonData">Ribbons</strong>
    </p> 
</div>

CSS

<style>
    .ribbon { 
        position: relative; 
        z-index:99; 
        padding:0 2em; 
    } 
    .ribbon p { 
        background: #037cd5; 
        color: #fff; 
        font-size: 18px; 
        text-align: center; 
        padding: 1em 2em; 
        margin: 0 0 3em; 
        position: relative; 
    }
    .ribbon p:before, 
    .ribbon p:after { 
        content: ""; 
        position: absolute; 
        display: block; 
        bottom: -1em; 
        border: 1.5em solid #0361a7 ; 
        z-index: -1; 
    }
    .ribbon p:before { 
        left: -2em; 
        border-right-width: 1.5em; 
        border-left-color: transparent; 
    }
    .ribbon p:after { 
        right: -2em; 
        border-left-width: 1.5em; 
        border-right-color: transparent; 
    }
    .ribbon .ribbonData:before, 
    .ribbon .ribbonData:after { 
        content: ""; 
        position: absolute; 
        display: block; 
        border-style: solid; 
        border-color: #014679 transparent transparent transparent; 
        bottom: -1em; 
    }
    .ribbon .ribbonData:before { 
        left: 0; 
        border-width: 1em 0 0 1em; 
    }
    .ribbon .ribbonData:after { 
        right: 0; 
        border-width: 1em 1em 0 0; ]
    }
</style>