CSS Corner Ribbon

For Example, CSS Corner Ribbon shape...

Demo

HTML

<div class="ribbonWrapper">
    <div class="ribbon">
        <div class="ribbon-color">Ribbon</div>
    </div>
</div>​

CSS

<style>
    .ribbonWrapper { 
        margin: 50px 0; 
        width: 240px; 
        height: 250px; 
        background: white; 
        border-radius: 10px; 
        position: relative; 
        z-index: 90; 
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.25); 
        -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.25); 
        box-shadow:         0px 0px 8px rgba(0,0,0,0.25);
    }
    .ribbon { 
        width: 85px; 
        height: 90px; 
        position: absolute; 
        top:-2px; 
        right:-2px; 
        overflow: hidden; 
    }
    .ribbon-color { 
        font: 15px; color: #FFF; 
        text-align: center; 
        width: 120px; 
        padding: 7px 0; 
        position: relative; 
        left: -5px; 
        top:15px; 
        -webkit-transform: rotate(45deg); 
        -moz-transform:    rotate(45deg); 
        -ms-transform:     rotate(45deg); 
        -o-transform:      rotate(45deg);
    
        background-color: #037cd5;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#037cd5), to(#0361a7)); 
        background-image: -webkit-linear-gradient(top, #037cd5, #0361a7); 
        background-image:    -moz-linear-gradient(top, #037cd5, #0361a7); 
        background-image:     -ms-linear-gradient(top, #037cd5, #0361a7); 
        background-image:      -o-linear-gradient(top, #037cd5, #0361a7); 
    }
    .ribbon-color:before, 
    .ribbon-color:after { 
        content: ""; 
        border-top: 3px solid #0361a7; 
        border-left: 3px solid transparent; 
        border-right: 3px solid transparent;
         position:absolute; bottom:-3px; 
    }
    .ribbon-color:before { 
        left: 0;
    }
    .ribbon-color:after { 
        right: 0;
    }​
</style>