Membuat Border Dengan Ribbon

Membuat Border Dengan Ribbon - Dalam pencarian SE Google banyak sekali teknik pembuatan border baik itu untuk gambar, text ataupun yang lainnya, pada kesempatan ini J-PB akan berbagi sebuah teknik penggabungan Border dengan Ribbon, adapun ahsil akhir dari tek nik ini dapat sobat lihat dalam gambar dibawah ataupun dalam kolom demo.

LIHAT DEMONYA INTRUKSI PEMASANGAN KODE

<div class="jpb-ribbon">
  <h1 class="ribbonnya">Judul Headernya</h1>
  <p>Isi kontennya disini.... </p>
<p>Isi kontennya disini.... </p>
</div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.jpb-ribbon {
  width: 400px;
  margin: 2em auto;
  background: white;
  border-color: #2980b9;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  padding: 0 0 0em 0;
}
.jpb-ribbon p {
  padding: 0 30px;
}
.ribbonnya {
  background-color: #1ab315;
  color: white;
  position: relative;
  z-index: 1;
  padding: 0.5em 1em 0;
  margin: 0 0 1.5em;
  text-align: center;
}
.ribbonnya:before,
.ribbonnya:after {
  position: absolute;
  content: '';
  z-index: -1;
}
.ribbonnya:before {
  background: linear-gradient(to bottom, #34495e, #3498db);
  left: -10px;
  height: 100%;
  width: 105%;
  top: 0;
}
.ribbonnya:after {
  top: 100%;
  left: -10px;
  width: 0;
  height: 0;
  border-width: 40px 210px 40px 210px;
  border-style: solid;
  border-color: #3498db transparent transparent transparent;
}

Demikian artikel tentang   "Membuat Border Dengan Ribbon"   ini J-PB sajikan semoga artikel sederhana ini dapat bermanfaat bagi sobat blogger khususnya.....!!!

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post