Bikin menu ribbon

Ditulis oleh: Kurniawan

Dalam waktu dekat saya ingin mengganti menu pada website saya dengan menggunakan desain pita, semua hanya menggunakan CSS supaya tampilanya enteng. Kira-kira nanti jadinya kurang lebih seperti dibawah, so mari kita bikin menu ribbon.

Skript htmlnya kaya gini :

"<h1 class="ribbon">
    <a href="http://#" strong class="ribbon-content">Ini Menu Saya </strong></a>
    
</h1>​"
​

CSS-nya
.ribbon {
 font-size: 16px !important;


 width: 80%;
    
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; 
 margin: 2em auto 3em; 
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}​

Lumayan