Cara Membuat Effect Ribbon dengan CSS

Baca Juga

Daftar isi: [Tampil]

Cara Membuat Effect Ribbon dengan CSS - AldoSEO | Apabila kita menerapkan effect ini ke blog kita akan terlihat lebih elegant dan enak dilihat. Oleh sebab itu saya akan mengshare CSSnya dibawah ini.

CSS :

.post-title h1, .post-title h2 {
background: #B62011;
color:#fff;
position:relative;
}
.post-title h1:after, .post-title h2:after, .post-title h1:before, .post-title h2:before {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
}
.post-title h1:before, .post-title h2:before {
  top: 100%;
  left: 0px;
  border-top: 7px solid #97010A;
  border-left: 7px solid transparent;
}
.post-title h1:after, .post-title h2:after {
  top: 100%;
  right: 0px;
  border-top: 7px solid #97010A;
  border-right: 7px solid transparent;
}

NB : Ganti warna merah sesuai selera kamu.