Mecha versi 2.6.4 sudah dirilis!

CSS3 Ribbon Snippets

Tabel Konten
  1. 30 
  2. 30 
Ribbon 1
.ribbon1 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#3B5998;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon1:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid #3B5998;
  border-right-color:transparent;
}
<div class="ribbon1">Ribbon 1</div>
Ribbon 2
.ribbon2 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#01943C;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon2:before {
  content:"";
  position:absolute;
  top:0px;
  right:100%;
  width:0px;
  height:0px;
  border:24px solid #01943C;
  border-left-color:transparent;
}

.ribbon2:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid transparent;
  border-left-color:#01943C;
}
<div class="ribbon2">Ribbon 2</div>
Ribbon 3
.ribbon3 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#CEB754;
  position:relative;
  left:-10px;
  line-height:48px;
  margin:50px auto;
}

.ribbon3:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#A28E34 #A28E34 transparent transparent;
}

.ribbon3:after {
  content:"";
  position:absolute;
  top:0px;
  left:100%;
  width:0px;
  height:0px;
  border:24px solid #CEB754;
  border-right-color:transparent;
}
<div class="ribbon3">Ribbon 3</div>
Ribbon 4
.ribbon4 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  padding:0px 30px;
  background:#AF3605;
  position:relative;
  line-height:48px;
  margin:50px auto;
  text-align:center;
}

.ribbon4:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A #76290A transparent transparent;
}

.ribbon4:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A transparent transparent #76290A;
}
<div class="ribbon4">Ribbon 4</div>
Ribbon 5
.ribbon5 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:60%;
  text-align:center;
  padding:0px 30px;
  background:#AF3605;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon5:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A #76290A transparent transparent;
}

.ribbon5:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:#76290A transparent transparent #76290A;
}

.ribbon5 div {
  width:100%;
}

.ribbon5 div:before, .ribbon5 div:after {
  content:"";
  position:absolute;
  width:0px;
  height:0px;
  border:24px solid #983912;
  top:10px;
  z-index:-1;
}

.ribbon5 div:before {
  border-left-color:transparent;
  right:100%;
  margin-right:-10px;
}

.ribbon5 div:after {
  border-right-color:transparent;
  left:100%;
  margin-left:-10px;
}
<div style="position:relative;z-index:1;">
    <div class="ribbon5"><div>Ribbon 5</div></div>
</div>

Dec

30 

Ribbon 6

.ribbon6 {
  font:bold 12px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:90px;
  text-align:center;
  padding:15px 0px;
  height:100px;
  background:#3B5998;
  position:relative;
  margin:50px auto 130px;
}

.ribbon6:after {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border:45px solid #3B5998;
  border-bottom-color:transparent;
}

.ribbon6 h2 {
  margin:0px 10px;
  font-size:30px;
}
<div class="ribbon6">Dec<h2>30</h2>Ribbon 6</div>

Dec

30 

Ribbon 7

.ribbon7 {
  font:bold 12px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:100px;
  text-align:center;
  padding:15px 0px 15px;
  height:150px;
  background:#3B5998;
  position:relative;
  margin:50px auto 100px;
}

.ribbon7:before, .ribbon7:after {
  content:"";
  position:absolute;
  bottom:-20px;
  left:-10px;
  width:0px;
  height:30px;
  border-width:20px 60px;
  border-style:solid;
  border-color:transparent #3B5998;
}

.ribbon7:after {
  bottom:10px;
}

.ribbon7 h2 {
  margin:0px 10px;
  font-size:30px;
}
<div class="ribbon7">Dec<h2>30</h2>Ribbon 7</div>
Ribbon 8
.ribbon8 {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:50%;
  height:48px;
  text-align:center;
  padding:0px 30px;
  background:#AF3605;
  position:relative;
  line-height:48px;
  margin:50px auto;
}

.ribbon8:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:10px;
  border-style:solid;
  border-color:#76290A #76290A transparent transparent;
}

.ribbon8:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:10px;
  border-style:solid;
  border-color:#76290A transparent transparent #76290A;
}

.ribbon8 div {
  width:100%;
  height:100%;
}

.ribbon8 div:before, .ribbon8 div:after {
  content:"";
  position:absolute;
  width:40px;
  height:100%;
  background:#983912;
  top:20px;
  z-index:-1;
}

.ribbon8 div:before {
  border-left-color:transparent;
  right:100%;
  margin-right:-20px;
}

.ribbon8 div:after {
  border-right-color:transparent;
  left:100%;
  margin-left:-20px;
}

.ribbon8 div div {
  width:100%;
  height:100%;
}

.ribbon8 div div:before, .ribbon8 div div:after {
  content:"";
  position:absolute;
  width:50px;
  height:0px;
  background:transparent;
  border:25px solid #AF3605;
  top:10px;
  z-index:3;
}

.ribbon8 div div:before {
  border-left-color:transparent;
  margin-right:10px;
}

.ribbon8 div div:after {
  border-right-color:transparent;
  margin-left:10px;
}

.ribbon8 div div div {
  width:100%;
  height:100%;
}

.ribbon8 div div div:before, .ribbon8 div div div:after {
  content:"";
  position:absolute;
  width:0px;
  height:0px;
  background:transparent;
  border:5px solid transparent;
  top:100%;
  margin-top:10px;
  z-index:1;
}

.ribbon8 div div div:before {
  border-top-color:#76290A;
  border-left-color:#76290A;
  margin-left:20px;
}

.ribbon8 div div div:after {
  border-top-color:#76290A;
  border-right-color:#76290A;
  margin-right:20px;
}
<div style="position:relative;z-index:1;">
    <div class="ribbon8"><div><div><div>Ribbon 8</div></div></div></div>
</div>

15 Komentar

Andy Web Blog

Ini lah yang saya tunggu2,
karya ribbon emang bgus ui, mantep nih diterapin di blog ane :D

Anonim

Kalo Penerapan Ke Title Positngan Gimana mas,,.?

Unknown

assalamualaikum mas taufik, sepertinya itu hasil dari penerapan dari CSS psedo element ya?? keren banget mas..
Oiya mau tanya mas, itu kan buat yang tulisan biasa, gimana caranya sih agar bisa di pakai pada judul posting ataupun breadcrumb dengan ribbon seperti itu??? sebenernya saya coba sisipin kode ke situ, tapi gak berhasil malah ada tulisan template error gitu mas, mungkin mas taufik bisa bantu ... please mas.. aku tunggu jawabanya mas taufik ...,

Taufik Nurrohman

Waalaikumsalam. Tinggal ganti teksnya dengan markup judul posting:

<div style="position:relative;z-index:1;">
<div class="ribbon8"><div><div><div>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</div></div></div></div>
</div>

Unknown

mas. kalo ingim memasang di sidebar gimana.,.??

uki

ehm...sep deh,lumayan :)

Anonim

Kalau dipasang di judul sidebar bagaimana ?

Anonim

Tidak usah dijawab admin..
*Sudah bisa kok!
Terima kasih tips nya..

Unknown

minta izin guna ya mas..

Unknown

Minta yang ribbon melengkung dong kang Taufik :D

Taufik Nurrohman

Susah membuatnya :(

Unknown

Nah itulah kang... :/

ane udah jelajah kemana-mana dengan harapan di dte dapet, tapi...
ya ternyata emang susah ya... :(

Unknown

mantap pisan kang :D

Komentar telah ditutup.