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>