CSS Ribbons
For Example, CSS Ribbons Content...
Demo
Ribbons
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>