CSS3 Ribbon Snippets
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>
.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>
.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
Taufik Nurrohman
Transformasi ⇒ http://jsfiddle.net/43eG7/52/
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:
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