Cara Membuat Ribbon Menggunakan HTML dan CSS

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Ribbon Menggunakan HTML dan CSS.

Pasti teman-teman ingin tampilan web teman-teman lebih menarik dengan menyisipkan animasi-animasi pada web.

Nah supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membuat Ribbon Menggunakan HTML dan CSS. berikut langkah-langkahnya:

– Pertama teman-teman ketikan kode html pada text editor teman-teman. Dan beri class seperti gambar di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	

<h1 class="ribbon">
   <strong class="ribbon-content">DUMET SCHOOL</strong>
</h1>


</div>
</body>
</html>

– Kedua teman-teman ketikan css di bawah ini dan save dengan nama style.css:

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


 width: 50%;
    
 position: relative;
 background: #00e6e6;
 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 #44d8d8;
 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: #00cccc 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;
}

– Hasilnya akan menjadi seperti ini.

Kalau di jalankan di browser ribbon akan jadi seperti hasil di atas.

Bagaimana teman-teman mudahkan Cara Membuat Ribbon Menggunakan HTML dan CSS. Sekian artikel saya hari ini. Sehat selalu ya teman-teman, selamat mencoba.