Sekarang Anda dapat membuat pita dengan murni CSS dan markup sedikit. Tidak ada lebih banyak menggunakan gambar besar dan kuat. Ini melibatkan penggunaan: sebelum dan: setelah unsur-unsur bersama dengan beberapa sifat perbatasan. Kelas non-semantik-pelindung menggunakan negatif z-indeks nilai untuk memperbaiki gangguan elemen latar belakang. Ini hanya diperlukan jika desain tidak muncul dengan benar. Berikut adalah Hasilnya :

KODE CSS :

.ribbontd {
 font-size: 20px !important;
 width: 50%;
 position: relative;
 background: #1daaeb;
 color: #fff;
 text-align: center !important;
 padding: 1em 1em !important;
 margin: 1em auto 3em;
}
.ribbontd:before, .ribbontd:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #148ec7;
 z-index: -1;
}
.ribbontd:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbontd:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbontd-content {
 color:#fff;
}
.ribbontd .ribbontd-content:before, .ribbontd .ribbontd-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #1077a7 transparent transparent transparent;
 bottom: -1em;
}
.ribbontd .ribbontd-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbontd .ribbontd-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}
.non-semantic-protector { position: relative; z-index: 1; }

KODE HTML :

<div class="non-semantic-protector">
<h1 class="ribbontd"><strong class="ribbontd-content">UTta MOG-MOG!!!</strong></h1>
</div>

Please rate this article: