CSS Ribbon

Ribbon atas

Ribbon bawah

CSS:

.ribbonatas {line-height:normal;color:#fff;text-decoration:none;padding:10px 10px;background:#384553;position:relative;margin:20px -12px}
.ribbonatas:before {content:"";position:absolute;top:100%;left:0px;width:0px;height:0px;border-width:5px;border-style:solid;border-color:#2C3944 #2C3944 transparent transparent;}
.ribbonatas:after {content:"";position:absolute;top:100%;right:0px;width:0px;height:0px;border-width:5px;border-style:solid;border-color:#2C3944 transparent transparent #2C3944;}
.ribbonbawah {color:#fff;padding:14px 10px;margin:0 -12px;background:#384553;position:relative;line-height:normal;}
.ribbonbawah:before {content:"";position:absolute;top:-20%;left:0px;width:0px;height:0px;border-width:5px;border-style:solid;border-color:transparent #2C3944 #2C3944 transparent;}
.ribbonbawah:after {content:"";position:absolute;top:-20%;right:0px;width:0px;height:0px;border-width:5px;border-style:solid;border-color:transparent transparent #2C3944 #2C3944;}

HTML:

<div class='ribbonatas'>Ribbon atas</div>
<div class='ribbonbawah'>Ribbon bawah</div>