User Postbit Badge

by GioLogist

HTML

<div class="postbit">


  <div class="badge-12 blue">
    <p>Emblem Member</p>
  </div>

  <div class="badge-12 gold">
    <p>Gold Member</p>
  </div>

  <div class="badge-12 emerald">
    <p>Emerald Member</p>
  </div>

  <div class="ribbon purple">
    <span class="c">Purple Ribbon Rank</span>
  </div>

  <div class="ribbon emerald">
    <span class="c">Emerald Ribbon Rank</span>
  </div>

  <div class="ribbon gold">
    <span class="c">Gold Ribbon Rank</span>
  </div>
  
  <div class="rankbadge red">
    Red Member
  </div>

  <div class="rankbadge blue">
    Blue Member
  </div>

  <div class="rankbadge green">
    Green Member
  </div>

  <div class="rankbadge lblue">
    Lblue Member
  </div>

  <div class="rankbadge lred">
    Lred Member
  </div>

  <div class="rankbadge gold">
    Gold Member
  </div>
  
  <div class="rankbadge silver">
    Silver Member
  </div>


  <div class="badge-ribbon">
    <p>Ribbon Memberr</p>
  </div>

</div>

CSS

body {
  font-family: Helvetica, sans-serif;
}

.postbit {
  background: #fff;
  width: 250px;
  margin: 0 auto;
  padding: 40px 20px 80px 20px;
}

.postbit .rankbadge {
  display: block;
  text-decoration: none;
  position: relative;
  font-size: 14px;
  text-align: center;
  padding: 5px 20px;
  background: #50c878;
  border: 1px solid #419E60;
  margin: 10px -25px;
  color: #fff !important;
  border-radius: 3px;
  -webkit-border-top-right-radius: 0;
  -moz-border-radius-topright: 0;
  -khtml-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -khtml-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-transition-duration: .2s;
  /* Safari */
  transition-duration: .2s;
  cursor: default;
  font-family: Helvetica, sans-serif;
}

.postbit .rankbadge:before,
.postbit .rankbadge:after {
  content: '';
  background: #419E60;
  position: absolute;
  top: -4px;
  width: 5px;
  height: 4px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -khtml-border-top-left-radius: 3px;
  border-top-left-radius: 3px;
  left: -1px;
}

.postbit .rankbadge:after {
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -khtml-border-top-right-radius: 3px;
  border-top-right-radius: 3px;
  right: -1px;
  left: inherit;
}

.postbit .rankbadge.emerald {
  background: #50c878;
  border: 1px solid #419E60;
}

.postbit .rankbadge.emerald:hover,
.postbit .rankbadge.emerald:before,
.postbit .rankbadge.emerald:after {
  background: #419E60;
  text-shadow: 2px 2px 1px #135D2B;
}

.postbit .rankbadge.gold {
  background: #ECC803;
  border: 1px solid #D4AF37;
}

.postbit .rankbadge.gold:hover,
.postbit .rankbadge.gold:before,
.postbit .rankbadge.gold:after {
  background: #D4AF37;
  text-shadow: 2px 2px 1px #947719;
}

.postbit .rankbadge.red {
  background: #A20C0C;
  border: 1px solid #710808;
}

.postbit .rankbadge.red:hover,
.postbit...