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

  • Unknown

    kalau dibuat miring gmn kang? diatas kan contohnya kan horizontal smua.
    trims

  • 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.