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>

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>