Kako da napravite CSS3 vrpcu ?

Evo jedno brzo i kratko uputstvo kako da uz pomoć CSS3 koda napravite pravu malu vrpcu. Odlična je za postavljanje na vaš sajt/blog kao pozadina za naslov u sidebaru ili negde drugde.

Ukratko, kod izgleda ovako:

HTML deo

<p class="ribbon">
    <strong class="ribbon-content">Baguje.COM</strong>
</p>

CSS deo

.ribbon {
  left: 30px;
  font-size: 16px !important;
  width:20%;
  position: relative;
  background: #A61E1E;
  color: #fff;
  text-align: center;
  padding: 1em 2em;
  margin: 0 0 3em;
}
.ribbon:before, .ribbon:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #851919;
  z-index: -1;
}
.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
}
.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #521010 transparent transparent transparent;
  bottom: -1em;
}
.ribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
}