Cara Membuat Efek Ribbon Pada Menu Menggunakan CSS

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaiman caranya membuat efek Ribbon pada elemen atau bagian menu yang ada di dalam sebuah Website. Efek ribbon maksudnya adalah kita akan membuat gambar pita di sisi kiri dan sisi kanan pada bagian menu tersebut. Efek ribbon ini akan kita buat menggunakan transisi CSS3 dan pseudo-element yang ada di CSS3. Dengan menggunakan efek ribbon ini kita dapat membuat tampilan website yang sangat menarik. Nah Nanti kita akan membuatnya seperti gambar di bawah ini.

Cara membuatnya sangat mudah sekali, teman-teman bisa ikuti langkah-langkahnya seperti berikut.

Pertama kita akan membuat struktur HTML nya seperti gambar di bawah ini :

Kemudian CSS nya berikut ini :

Pada CSS di atas kalian bisa lihat, saya menggunakan pseudo-element :before dan :after untuk membuat ribbon tersebut

Dan hasilnya seperti ini :

Download