Pure CSS Corner Ribbon

under88 - Kali ini saya akan mencoba menjelaskan cara membuat CSS Corner Ribbon yang pada dasarnya untuk memberikan tanda pada sebuah content atau widget tertentu. dalam hal ini saya hanya akan mempergunakan CSS3 sebagai basicnya tanpa menggunakan Image(gambar). lihat demo...

View Page Demo

HTML

Banyak penyimpanan markup yang bisa di lakukan

<div class="wrapper">
  <div class="ribbon-wrapper-green">
     <div class="ribbon-green">UNDER</div>
  </div>
</div>​

CSS Wrapper

Style warna hijau yang mungkin bisa anda kembangkan sendiri sesuai selera.

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

Content yang mencangkup keseluruhan isi. dengan penempatan ini bisa di lakukan di berbagai tempat seperti .post , .content-wrapper , #main-wrapper dan lain-lain . Yang perlu di perhatikan adalan position: relative;. Saya sarankan itu tidak perlu ada perubahan position. karena bila di ganti maka posisi bukan lagi di tempat yang sesuai. mungkin akan muncul di atas header atau di samping. tingkat lanjut tulis komentar.

CSS Corner-Ribbon Style

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​

ket : tanpa harus ada perubahan .. kecuali background ,border dan box shadow yang bisa di kreasikan dengan tampilan yang anda inginkan. tingkat lanjut tulis komentar .

Lihat Demo

reference