10+ CSS Badge Examples

This post contains a total of 10+ CSS Badge Examples with Source Code. All these Badges are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Badge Examples

1. GDPR badges

Made by Berkmans Johnny. Source

GDPR Badges
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<style>
:root{
  --color-primary: #214fe0;
  --color-dark: #1d1f20;
  --color-light: #f4f4f4;
  --color-shade: #bbb;
  
  --badge-size: 250px;
  
  --lock-color: #fff;
  --lock-width: 30px;
  --lock-stroke: 2.5px;
  
}
::selection{
  background:
}
body{
  background-color: var(--color-light);
}
main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.badge-icon, 
.badge-text{
  padding:1.5rem;
  float:left;
  -webkit-box-flex:1;
  flex:1
}

.badge{
  display:flex;
  margin-bottom: 1.5rem;
  margin-right: 1.5rem;

  color: var(--color-light);

  min-width: var(--badge-size);
  border-radius: 5px;
  box-shadow: 0px 0px 60px var(--color-shade);
  
  overflow: hidden;
}

.badge-icon{
    background: url('https://upload.wikimedia.org/wikipedia/commons/9/93/European_stars.svg') var(--color-primary) no-repeat center center;
  background-size: contain;
  max-width: calc( var(--badge-size) / 5);
}

.badge-text{
  font: normal small-caps normal 16px/1.5 Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  line-height: 1;
  text-align: left;
}

.badge[data-color=""] .badge-text,
.badge[data-color="default"] .badge-text{
    color: var(--color-light);
    background-color: var(--color-primary);
}
.badge[data-color="light"] .badge-text{
    color: var(--color-dark);
    background-color: var(--color-light);
}
.badge[data-color="dark"] .badge-text{
    color: var(--color-light);
    background-color: var(--color-dark);
}


/*The body of the lock*/
.lock {
  display:block;
  width: var(--lock-width);
  height: calc(var(--lock-width) * 0.75);
  
  top: 50%; left:50%;
  transform: translate(-50%,-50%);
  
  border: var(--lock-stroke) solid var(--lock-color);
  border-radius: 5px;
  position: relative;
  
  transition: all 0.1s ease-in-out;
}
/*The keyhole*/
.lock:after {
  content: "";
  display: block;
  background: var(--lock-color);
  
  width: var(--lock-stroke);
  height: calc(var(--lock-stroke) * 3);
  
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50% , -50%);

  transition: all 0.1s ease-in-out;
}
/*The arm of the lock*/
.lock:before {
  content: "";
  display: block;
  width: calc(var(--lock-width) / 2);
  height: calc(var(--lock-width) / 3);
  
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);

  border: var(--lock-stroke) solid var(--lock-color);
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom: 0;
}
</style>
</head>
<body>
<main>
  <div class="badge" data-color="default">
    <div class="badge-icon">
      <span class="lock"></span>
    </div>
    <div class="badge-text">
      <span><b>gdpr</b></span><br>
      <span>compliant</span>
    </div>
  </div>

  <div class="badge" data-color="dark">
    <div class="badge-icon">
      <span class="lock"></span>
    </div>
    <div class="badge-text">
      <span><b>gdpr</b></span><br>
      <span>ready</span>
    </div>
  </div>

  <div class="badge" data-color="light">
    <div class="badge-icon">
      <span class="lock"></span>
    </div>
    <div class="badge-text">
      <span><b>gdpr</b></span><br>
      <span>progress</span>
    </div>
  </div>  
</main>
</body>
</html>

2. Title badges

Made by daniesy. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
.badge {
  position: relative;
  width: 216px;
  display: inline-block;
  margin: 40px;
}
.badge .title {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 1.7em;
  position: absolute;
  top: -28px;
  border-radius: 8px 8px 0 0;
  text-align: center;
  width: 100%;
  background: red;
  padding: 20px 0;
}
.badge .subtitle {
  position: absolute;
  font-family: "Fjalla One", sans-serif;
  font-size: 1.8em;
  width: 100%;
  text-align: center;
  color: white;
  position: absolute;
  top: 100px;
}
.badge .subtitle:after {
  content: "β˜… β˜… β˜…";
  display: block;
  font-size: .4em;
  position: relative;
  margin: 15px 0 0;
  transition: all .3s;
}
.badge:hover .subtitle:after {
  word-spacing: 30px;
}

.red .title {
  background: #DC514E;
}
.red .subtitle:after {
  color: #DC514E;
}

.green .title {
  background: #2ecc71;
}
.green .subtitle:after {
  color: #2ecc71;
}

.gray .title {
  background: #95a5a6;
}
.gray .subtitle:after {
  color: #95a5a6;
}

.yellow .title {
  background: #f1c40f;
}
.yellow .subtitle:after {
  color: #f1c40f;
}

.blue .title {
  background: #3498db;
}
.blue .subtitle:after {
  color: #3498db;
}
</style>
</head>
<body>
  <div class="badge red">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
		<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169    c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
  <p class="title">BRUTEFORCE EXPERT</p>
  <p class="subtitle">CTF 365</p>
</div>

<div class="badge green">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
		<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169    c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
  <p class="title">SQLi<br/>MASTER</p>
  <p class="subtitle">CTF 365</p>
</div>

<div class="badge gray">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
		<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169    c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
  <p class="title">SNIFFER COMMANDER</p>
  <p class="subtitle">CTF 365</p>
</div>

<div class="badge yellow">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
		<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169    c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
  <p class="title">SCRIPT<br/>EXPERT</p>
  <p class="subtitle">CTF 365</p>
</div>

<div class="badge blue">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="216px" height="232px" viewBox="0 0 216 232">
		<path fill="#2B2B2B" d="M207,0C171.827,0.001,43.875,0.004,9.003,0c-5.619-0.001-9,3.514-9,9c0,28.23-0.006,151.375,0,169    c0.005,13.875,94.499,54,107.999,54S216,191.57,216,178V9C216,3.298,212.732,0,207,0z"/>
</svg>
  <p class="title">CRYPTO MASTER</p>
  <p class="subtitle">CTF 365</p>
</div>
</body>
</html>

3. CSS Badge Promotion

Made by Hangs Breaker. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{background:#ecf0f1;}
a{text-decoration:none;}
.firstLine {
    font-size: 24px;
    font-weight: 300;
}.secondLine {
    font-size: 36px;
    line-height: 36px;
    font-weight: 600;
} .thirdLine {
    font-size: 26px;
    line-height: 32px;
    font-weight: 300;
}.fourthLine {
    font-size: 12px;
    font-weight: 300;
    position: relative;
    top: -10px;
}

.badges {
    position:relative;
    margin:140px auto;
    width:200px;
    height:200px;
    background:#552F87;
    border-radius:100%;
    color: #FFF;
    line-height: 25px;
    text-align: center;
    text-transform: uppercase;
    font-family: "Open Sans",sans-serif;
    -webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
    -moz-animation: 3s ease-in-out 0s normal none infinite running swing;
    -o-animation: 3s ease-in-out 0s normal none infinite running swing;
    animation: 3s ease-in-out 0s normal none infinite running swing;
    
    -webkit-transform-origin: 100px -71px;
    -moz-transform-origin: 100px -71px;
    -o-transform-origin: 100px -71px;
    transform-origin: 100px -71px;
}
.badges:before{
    content:'';
    position:absolute;
    top:90px;left:90px;
    width:20px;height:20px;
    border-radius:100%;
    -webkit-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
                
    
    -moz-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
                
    
    -o-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
                
    
    box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87,20px -98px #552F87,39px -94px #552F87,56px -85px #552F87,71px -72px #552F87,
                83px -57px #552F87,93px -40px #552F87,98px -20px #552F87,100px 0px #552F87,
                
                -20px -98px #552F87,-39px -94px #552F87,-71px -72px #552F87,
                -56px -85px #552F87,-83px -57px #552F87,-93px -40px #552F87,-98px -20px #552F87,-100px 0px #552F87,
                
                0px 100px #552F87,-20px 98px #552F87,-39px 94px #552F87,-56px 85px #552F87,
                -71px 72px #552F87,-83px 57px #552F87,-93px -40px #552F87,-98px 20px #552F87,-93px 40px #552F87,
                
                20px 98px #552F87,39px 94px #552F87,56px 85px #552F87,
                71px 72px #552F87,83px 57px #552F87,93px 40px #552F87,98px 20px #552F87;
}
.badges:after{
    content:'';
    position:absolute;
    top:-70px;left:99px;
    width:2px;height:81px;
    border-radius:0%;
    background:#000;
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(5deg);}
    50%{-webkit-transform:rotate(-5deg);}
    100%{-webkit-transform:rotate(5deg);}
}
@-moz-keyframes swing{
    0%{-moz-transform:rotate(5deg);}
    50%{-moz-transform:rotate(-5deg);}
    100%{-moz-transform:rotate(5deg);}
}
@-o-keyframes swing{
    0%{-o-transform:rotate(5deg);}
    50%{-o-transform:rotate(-5deg);}
    100%{-o-transform:rotate(5deg);}
}
@keyframes swing{
    0%{transform:rotate(5deg);}
    50%{transform:rotate(-5deg);}
    100%{transform:rotate(5deg);}
}
</style>
</head>
<body>
  <a href="#">
<div class="badges"><br>
    <p>
        <span class="firstLine">GET UP TO</span><br>
        <span class="secondLine">$10,000</span><br>
        <span class="thirdLine">PER MONTH</span><br>
        <span class="fourthLine">AS A POPULAR INVESTOR</span>
    </p>
</div>
</a>
</body>
</html>

4. Pokemon badges in HTML/CSS

Made by Kevin Jannis. Source

Pokemon badges in HTML/CSS
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import "https://fonts.googleapis.com/css?family=Lato";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:before,
*:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

body {
  padding: 25px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  background: #454545;
}

#wrapper {
  display: table;
  table-layout: fixed;
  width: 960px;
  height: 560px;
  margin: 40px auto;
}

#boulder-badge,
#cascade-badge,
#thunder-badge,
#rainbow-badge,
#soul-badge,
#marsh-badge,
#volcano-badge,
#earth-badge {
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
  width: 240px;
  height: 240px;
  padding: 20px;
}

#boulder-badge .badge,
#cascade-badge .badge,
#thunder-badge .badge,
#rainbow-badge .badge,
#soul-badge .badge,
#marsh-badge .badge,
#volcano-badge .badge,
#earth-badge .badge {
  display: inline-block;
}

#boulder-badge h1,
#cascade-badge h1,
#thunder-badge h1,
#rainbow-badge h1,
#soul-badge h1,
#marsh-badge h1,
#volcano-badge h1,
#earth-badge h1 {
  font-family: Lato, sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  color: white;
  margin-top: 30px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

#boulder-badge {
  background: #2d3e50;
}

#boulder-badge .badge {
  position: relative;
  width: 180px;
  height: 180px;
}

#boulder-badge .badge .part,
#boulder-badge .badge .part:before,
#boulder-badge .badge .part:after {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#boulder-badge .badge .part {
  -webkit-transform-origin: center center 0;
  -moz-transform-origin: center center 0;
  -ms-transform-origin: center center 0;
  -o-transform-origin: center center 0;
  transform-origin: center center 0;
  top: 0;
  left: 50%;
  margin-left: -38px;
  border-width: 90px 38px 90px 38px;
}

#boulder-badge .badge .part:before {
  -webkit-transform: rotate(0.01deg);
  -moz-transform: rotate(0.01deg);
  -ms-transform: rotate(0.01deg);
  -o-transform: rotate(0.01deg);
  transform: rotate(0.01deg);
  /* Jagged edge fix */
  content: " ";
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -26px;
  border-width: 60px 26px 60px 26px;
  z-index: 10;
}

#boulder-badge .badge .part:after {
  -webkit-transform: rotate(0.01deg);
  -moz-transform: rotate(0.01deg);
  -ms-transform: rotate(0.01deg);
  -o-transform: rotate(0.01deg);
  transform: rotate(0.01deg);
  content: " ";
  top: 50%;
  left: 50%;
  margin-top: -39px;
  margin-left: -17px;
  border-width: 39px 17px 39px 17px;
  z-index: 20;
}

#boulder-badge .badge .part-1 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-top-color: #9f9d9e;
  border-bottom-color: #646263;
  z-index: 50;
}

#boulder-badge .badge .part-1:before {
  border-top-color: #878586;
  border-bottom-color: #595556;
}

#boulder-badge .badge .part-1:after {
  border-top-color: #8d8d8d;
  border-bottom-color: #7f7f7f;
}

#boulder-badge .badge .part-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top-color: #858182;
  border-bottom-color: #898788;
  z-index: 40;
}

#boulder-badge .badge .part-2:before {
  border-top-color: #706e6f;
  border-bottom-color: #777576;
}

#boulder-badge .badge .part-2:after {
  border-top-color: #8d8d8d;
  border-bottom-color: #8d8d8d;
}

#boulder-badge .badge .part-3 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border-top-color: #676364;
  border-bottom-color: #979596;
  z-index: 30;
}

#boulder-badge .badge .part-3:before {
  border-top-color: #595556;
  border-bottom-color: #838182;
}

#boulder-badge .badge .part-3:after {
  border-top-color: #7f7f7f;
  border-bottom-color: #8d8d8d;
}

#boulder-badge .badge .part-4 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top-color: #615d5e;
  border-bottom-color: #a5a3a4;
  z-index: 20;
}

#boulder-badge .badge .part-4:before {
  border-top-color: #535152;
  border-bottom-color: #878586;
}

#boulder-badge .badge .part-4:after {
  border-top-color: #7f7f7f;
  border-bottom-color: #8d8d8d;
}

#boulder-badge .badge .part-shade {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 13px;
  margin-left: -6px;
  border-left-width: 0;
  border-top-color: #767475;
  border-bottom-color: #7b797a;
  z-index: 100;
}

#boulder-badge .badge .part-shade:before {
  margin-left: 0;
  border-left-width: 0;
  border-top-color: #656364;
  border-bottom-color: #6b696a;
}

#boulder-badge .badge .part-shade:after {
  margin-left: 0;
  border-left-width: 0;
  border-top-color: #7f7f7f;
  border-bottom-color: #7f7f7f;
}

#cascade-badge {
  background: #474749;
}

#cascade-badge .badge {
  position: relative;
  width: 145px;
  height: 200px;
}

#cascade-badge .badge .part {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#cascade-badge .badge .part-1,
#cascade-badge .badge .part-2,
#cascade-badge .badge .part-3,
#cascade-badge .badge .part-4 {
  left: 50%;
}

#cascade-badge .badge .part-5,
#cascade-badge .badge .part-6,
#cascade-badge .badge .part-7,
#cascade-badge .badge .part-8 {
  right: 50%;
}

#cascade-badge .badge .part-1 {
  border-width: 60px 0 40px 37px;
  border-left-color: #39a8d5;
}

#cascade-badge .badge .part-2 {
  -webkit-transform: rotate(13deg);
  -moz-transform: rotate(13deg);
  -ms-transform: rotate(13deg);
  -o-transform: rotate(13deg);
  transform: rotate(13deg);
  top: 61px;
  margin-left: 4px;
  border-width: 0 48px 48px 27px;
  border-bottom-color: #25a2d2;
}

#cascade-badge .badge .part-3 {
  -webkit-transform: rotate(13deg);
  -moz-transform: rotate(13deg);
  -ms-transform: rotate(13deg);
  -o-transform: rotate(13deg);
  transform: rotate(13deg);
  top: 107px;
  margin-left: -9px;
  border-width: 63px 7px 0 69px;
  border-top-color: #0d9bcd;
}

#cascade-badge .badge .part-4 {
  top: 100px;
  border-width: 75px 0 24px 52px;
  border-left-color: #0697c9;
}

#cascade-badge .badge .part-5 {
  top: 100px;
  border-width: 75px 52px 24px 0;
  border-right-color: #25a2d2;
}

#cascade-badge .badge .part-6 {
  -webkit-transform: rotate(-13deg);
  -moz-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  -o-transform: rotate(-13deg);
  transform: rotate(-13deg);
  top: 107px;
  margin-right: -9px;
  border-width: 63px 69px 0 7px;
  border-top-color: #45acd9;
}

#cascade-badge .badge .part-7 {
  -webkit-transform: rotate(-13deg);
  -moz-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  -o-transform: rotate(-13deg);
  transform: rotate(-13deg);
  top: 61px;
  margin-right: 4px;
  border-width: 0 27px 48px 48px;
  border-bottom-color: #55b0dd;
}

#cascade-badge .badge .part-8 {
  border-width: 60px 37px 40px 0;
  border-right-color: #5db4df;
}

#thunder-badge {
  background: #525c65;
}

#thunder-badge .badge {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 68px;
  border-color: #eac830 #ebae2c #ebae2c #eac830;
  margin-bottom: 27px;
}

#thunder-badge .badge:before, #thunder-badge .badge:after {
  -webkit-transform-origin: center right 0;
  -moz-transform-origin: center right 0;
  -ms-transform-origin: center right 0;
  -o-transform-origin: center right 0;
  transform-origin: center right 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  content: " ";
  position: absolute;
  top: -68px;
  left: -68px;
  width: 68px;
  height: 136px;
  background: #eac830;
  z-index: 10;
}

#thunder-badge .badge:after {
  -webkit-transform-origin: center left 0;
  -moz-transform-origin: center left 0;
  -ms-transform-origin: center left 0;
  -o-transform-origin: center left 0;
  transform-origin: center left 0;
  left: 0;
  background: #ebae2c;
}

#thunder-badge .badge .part,
#thunder-badge .badge .part:before {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#thunder-badge .badge .part {
  -webkit-transform-origin: center center 0;
  -moz-transform-origin: center center 0;
  -ms-transform-origin: center center 0;
  -o-transform-origin: center center 0;
  transform-origin: center center 0;
  top: -60px;
  left: 50%;
  margin-left: -25px;
  border-width: 60px 25px 60px 25px;
  z-index: 20;
}

#thunder-badge .badge .part:before {
  -webkit-transform: rotate(0.01deg);
  -moz-transform: rotate(0.01deg);
  -ms-transform: rotate(0.01deg);
  -o-transform: rotate(0.01deg);
  transform: rotate(0.01deg);
  /* Jagged edge fix */
  content: " ";
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -17px;
  border-width: 40px 17px 40px 17px;
  border-top-color: #e64d2d;
  border-bottom-color: #e64d2d;
  z-index: 30;
}

#thunder-badge .badge .part-1 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-top-color: #da492c;
  border-bottom-color: #ac3518;
  z-index: 50;
}

#thunder-badge .badge .part-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border-top-color: #b33921;
  border-bottom-color: #be3e25;
  z-index: 40;
}

#thunder-badge .badge .part-3 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border-top-color: #ac3518;
  border-bottom-color: #d2452a;
  z-index: 30;
}

#thunder-badge .badge .part-4 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top-color: #a63016;
  border-bottom-color: #da492c;
  z-index: 20;
}

#thunder-badge .badge .part-shade {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 9px;
  margin-left: -4px;
  border-left-width: 0;
  border-top-color: #bf3b1f;
  border-bottom-color: #c93f22;
  z-index: 100;
}

#thunder-badge .badge .part-shade:before {
  margin-left: 0;
  border-left-width: 0;
  border-top-color: #e64d2d;
  border-bottom-color: #e64d2d;
}

#rainbow-badge {
  background: #474749;
}

#rainbow-badge .badge {
  position: relative;
  height: 180px;
  width: 180px;
}

#rainbow-badge .badge:before {
  content: " ";
  position: absolute;
  background: #bdb6b4;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  border-style: solid;
  border-width: 16px;
  border-color: #c6bebc #beb6b4 #beb6b4 #c6bebc;
  z-index: 50;
}

#rainbow-badge .badge .part-leaf {
  -webkit-transform-origin: center bottom 0;
  -moz-transform-origin: center bottom 0;
  -ms-transform-origin: center bottom 0;
  -o-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  position: absolute;
  top: 0;
  left: 50%;
  height: 90px;
  width: 0;
  margin-left: -13px;
  border-style: solid;
  border-color: transparent;
  border-color: transparent;
  border-width: 0 13px 0 13px;
  z-index: 10;
}

#rainbow-badge .badge .part-leaf:before, #rainbow-badge .badge .part-leaf:after {
  content: " ";
  position: absolute;
  top: -1px;
  border-style: solid;
  border-color: transparent;
  border-color: transparent;
}

#rainbow-badge .badge .part-leaf:before {
  right: 12px;
  border-width: 23px 17px 40px 0;
}

#rainbow-badge .badge .part-leaf:after {
  left: 12px;
  border-width: 23px 0 40px 17px;
}

#rainbow-badge .badge .part-leaf.part-1 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-left-color: #e2004b;
  border-right-color: #d60048;
}

#rainbow-badge .badge .part-leaf.part-1:before {
  border-right-color: #e2004b;
}

#rainbow-badge .badge .part-leaf.part-1:after {
  border-left-color: #d60048;
}

#rainbow-badge .badge .part-leaf.part-2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border-left-color: #e64d2d;
  border-right-color: #d2452a;
}

#rainbow-badge .badge .part-leaf.part-2:before {
  border-right-color: #e64d2d;
}

#rainbow-badge .badge .part-leaf.part-2:after {
  border-left-color: #d2452a;
}

#rainbow-badge .badge .part-leaf.part-3 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border-left-color: #e0bd2d;
  border-right-color: #d4b42b;
}

#rainbow-badge .badge .part-leaf.part-3:before {
  border-right-color: #e0bd2d;
}

#rainbow-badge .badge .part-leaf.part-3:after {
  border-left-color: #d4b42b;
}

#rainbow-badge .badge .part-leaf.part-4 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  border-left-color: #4e9f5e;
  border-right-color: #54b36a;
}

#rainbow-badge .badge .part-leaf.part-4:before {
  border-right-color: #4e9f5e;
}

#rainbow-badge .badge .part-leaf.part-4:after {
  border-left-color: #54b36a;
}

#rainbow-badge .badge .part-leaf.part-5 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  border-left-color: #399f57;
  border-right-color: #3eaa5e;
}

#rainbow-badge .badge .part-leaf.part-5:before {
  border-right-color: #399f57;
}

#rainbow-badge .badge .part-leaf.part-5:after {
  border-left-color: #3eaa5e;
}

#rainbow-badge .badge .part-leaf.part-6 {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
  border-left-color: #67a3c7;
  border-right-color: #6eb3de;
}

#rainbow-badge .badge .part-leaf.part-6:before {
  border-right-color: #67a3c7;
}

#rainbow-badge .badge .part-leaf.part-6:after {
  border-left-color: #6eb3de;
}

#rainbow-badge .badge .part-leaf.part-7 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  border-left-color: #486ba7;
  border-right-color: #4d70b3;
}

#rainbow-badge .badge .part-leaf.part-7:before {
  border-right-color: #486ba7;
}

#rainbow-badge .badge .part-leaf.part-7:after {
  border-left-color: #4d70b3;
}

#rainbow-badge .badge .part-leaf.part-8 {
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
  border-left-color: #9455a2;
  border-right-color: #8b4f9b;
}

#rainbow-badge .badge .part-leaf.part-8:before {
  border-right-color: #9455a2;
}

#rainbow-badge .badge .part-leaf.part-8:after {
  border-left-color: #8b4f9b;
}

#rainbow-badge .badge .part-inner {
  -webkit-transform-origin: center bottom 0;
  -moz-transform-origin: center bottom 0;
  -ms-transform-origin: center bottom 0;
  -o-transform-origin: center bottom 0;
  transform-origin: center bottom 0;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 35px;
  width: 0;
  margin-left: -14px;
  margin-top: -35px;
  border-style: solid;
  border-color: transparent;
  border-color: transparent;
  border-width: 0 14px 0 14px;
  z-index: 20;
}

#rainbow-badge .badge .part-inner:before, #rainbow-badge .badge .part-inner:after {
  content: " ";
  position: absolute;
  top: -1px;
  border-style: solid;
  border-color: transparent;
  border-color: transparent;
}

#rainbow-badge .badge .part-inner:before {
  right: 13px;
  border-width: 16px 10px 10px 0;
}

#rainbow-badge .badge .part-inner:after {
  left: 13px;
  border-width: 16px 0 10px 10px;
}

#rainbow-badge .badge .part-inner.part-1 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border-left-color: #e4d3cf;
  border-right-color: #d9c8c4;
}

#rainbow-badge .badge .part-inner.part-1:before {
  border-right-color: #e4d3cf;
}

#rainbow-badge .badge .part-inner.part-1:after {
  border-left-color: #d9c8c4;
}

#rainbow-badge .badge .part-inner.part-2 {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  border-left-color: #cfbeb8;
  border-right-color: #cfbeb8;
}

#rainbow-badge .badge .part-inner.part-2:before {
  border-right-color: #cfbeb8;
}

#rainbow-badge .badge .part-inner.part-2:after {
  border-left-color: #cfbeb8;
}

#rainbow-badge .badge .part-inner.part-3 {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
  border-left-color: #e6d4d3;
  border-right-color: #efe2db;
}

#rainbow-badge .badge .part-inner.part-3:before {
  border-right-color: #e6d4d3;
}

#rainbow-badge .badge .part-inner.part-3:after {
  border-left-color: #efe2db;
}

#rainbow-badge .badge .part-inner.part-4 {
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
  border-left-color: #fbeee7;
  border-right-color: #fbeee7;
}

#rainbow-badge .badge .part-inner.part-4:before {
  border-right-color: #fbeee7;
}

#rainbow-badge .badge .part-inner.part-4:after {
  border-left-color: #fbeee7;
}

#soul-badge {
  background: #2d3e50;
}

#soul-badge .badge {
  position: relative;
  height: 180px;
  width: 180px;
}

#soul-badge .badge .part {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: transparent;
}

#soul-badge .badge .part-1 {
  -webkit-transform: rotate(-62deg);
  -moz-transform: rotate(-62deg);
  -ms-transform: rotate(-62deg);
  -o-transform: rotate(-62deg);
  transform: rotate(-62deg);
  left: 50%;
  margin-top: 31px;
  margin-left: -36px;
  border-width: 0 41px 27px 50px;
  border-bottom-color: #c370a4;
}

#soul-badge .badge .part-2 {
  -webkit-transform: rotate(-119deg);
  -moz-transform: rotate(-119deg);
  -ms-transform: rotate(-119deg);
  -o-transform: rotate(-119deg);
  transform: rotate(-119deg);
  right: 50%;
  margin-top: 31px;
  margin-right: -36px;
  border-width: 27px 41px 0 50px;
  border-top-color: #c370a4;
}

#soul-badge .badge .part-3 {
  -webkit-transform: rotate(-27deg);
  -moz-transform: rotate(-27deg);
  -ms-transform: rotate(-27deg);
  -o-transform: rotate(-27deg);
  transform: rotate(-27deg);
  left: 50%;
  margin-top: 20px;
  margin-left: -18px;
  border-width: 0 23px 53px 75px;
  border-bottom-color: #b86c9d;
}

#soul-badge .badge .part-4 {
  -webkit-transform: rotate(-154deg);
  -moz-transform: rotate(-154deg);
  -ms-transform: rotate(-154deg);
  -o-transform: rotate(-154deg);
  transform: rotate(-154deg);
  right: 50%;
  margin-top: 20px;
  margin-right: -18px;
  border-width: 53px 23px 0 75px;
  border-top-color: #cb76af;
}

#soul-badge .badge .part-5 {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
  left: 50%;
  margin-top: 44px;
  border-width: 0 6px 51px 84px;
  border-bottom-color: #aa6091;
}

#soul-badge .badge .part-6 {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
  right: 50%;
  margin-top: 44px;
  border-width: 0 84px 51px 6px;
  border-bottom-color: #c370a4;
}

#soul-badge .badge .part-7 {
  -webkit-transform: rotate(51deg);
  -moz-transform: rotate(51deg);
  -ms-transform: rotate(51deg);
  -o-transform: rotate(51deg);
  transform: rotate(51deg);
  left: 50%;
  margin-left: 10px;
  margin-top: 65px;
  border-width: 0 7px 63px 63px;
  border-bottom-color: #995681;
}

#soul-badge .badge .part-8 {
  -webkit-transform: rotate(-51deg);
  -moz-transform: rotate(-51deg);
  -ms-transform: rotate(-51deg);
  -o-transform: rotate(-51deg);
  transform: rotate(-51deg);
  right: 50%;
  margin-right: 10px;
  margin-top: 65px;
  border-width: 0 63px 63px 7px;
  border-bottom-color: #b86c9d;
}

#soul-badge .badge .part-9 {
  top: 50%;
  left: 50%;
  border-width: 52px 0 45px 44px;
  border-left-color: #874d73;
}

#soul-badge .badge .part-10 {
  top: 50%;
  right: 50%;
  border-width: 52px 44px 45px 0;
  border-right-color: #b26695;
}

#soul-badge .badge .part-shade {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 4px;
  margin-left: -3px;
  width: 6px;
  height: 89px;
  background: #4e3145;
  z-index: 20;
}

#soul-badge .badge .part-shade:before, #soul-badge .badge .part-shade:after {
  content: " ";
  position: absolute;
  left: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: transparent;
}

#soul-badge .badge .part-shade:before {
  top: -7px;
  border-width: 0 3px 4px 3px;
  border-bottom-color: #4e3145;
}

#soul-badge .badge .part-shade:after {
  bottom: -7px;
  border-width: 4px 3px 0 3px;
  border-top-color: #4e3145;
}

#marsh-badge {
  background: #2d3e50;
}

#marsh-badge .badge {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  width: 180px;
  height: 180px;
  background: #f0c514;
  overflow: hidden;
}

#marsh-badge .badge:before, #marsh-badge .badge:after {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 180px;
  background: #eeb412;
}

#marsh-badge .badge:before {
  margin-left: 70px;
}

#marsh-badge .badge:after {
  margin-top: 150px;
}

#marsh-badge .badge .inner {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  background: #f0c514;
  border: solid 6px #f59d1f;
  overflow: hidden;
  z-index: 10;
}

#marsh-badge .badge .inner:before {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 180px;
  background: #eeb412;
  margin: 40px 0 0 10px;
}

#volcano-badge {
  background: #474749;
}

#volcano-badge .badge {
  position: relative;
  width: 165px;
  height: 190px;
}

#volcano-badge .badge .part-outer {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#volcano-badge .badge .part-outer.part-1 {
  top: 0;
  left: 50%;
  border-width: 51px 0 37px 39px;
  border-left-color: #e01544;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-2 {
  top: 0;
  right: 50%;
  border-width: 51px 39px 37px 0;
  border-right-color: #e01544;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-3 {
  -webkit-transform: rotate(34deg);
  -moz-transform: rotate(34deg);
  -ms-transform: rotate(34deg);
  -o-transform: rotate(34deg);
  transform: rotate(34deg);
  top: 0;
  left: 50%;
  height: 70px;
  border-width: 25px 0 18px 48px;
  border-left-color: #d61240;
  margin: 44px 0 0 30px;
}

#volcano-badge .badge .part-outer.part-3:before, #volcano-badge .badge .part-outer.part-3:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#volcano-badge .badge .part-outer.part-3:before {
  height: 50px;
  border-width: 12px 7px 0 0;
  border-right-color: #d61240;
  margin: -16px 0 0 -52px;
}

#volcano-badge .badge .part-outer.part-3:after {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
  width: 20px;
  height: 60px;
  border: none;
  background: #d61240;
  margin: -6px 0 0 -68px;
}

#volcano-badge .badge .part-outer.part-4 {
  -webkit-transform: rotate(-34deg);
  -moz-transform: rotate(-34deg);
  -ms-transform: rotate(-34deg);
  -o-transform: rotate(-34deg);
  transform: rotate(-34deg);
  top: 0;
  right: 50%;
  height: 70px;
  border-width: 25px 48px 18px 0;
  border-right-color: #ec1747;
  margin: 45px 30px 0 0;
}

#volcano-badge .badge .part-outer.part-4:before, #volcano-badge .badge .part-outer.part-4:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#volcano-badge .badge .part-outer.part-4:before {
  height: 50px;
  border-width: 12px 0 0 7px;
  border-left-color: #ec1747;
  margin: -14px 0 0 47px;
}

#volcano-badge .badge .part-outer.part-4:after {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
  width: 20px;
  height: 60px;
  border: none;
  background: #ec1747;
  margin: -6px 0 0 45px;
}

#volcano-badge .badge .part-outer.part-5 {
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  transform: rotate(25deg);
  top: 0;
  left: 50%;
  margin: 95px 0 0 -4px;
  border-width: 0 17px 13px 68px;
  border-bottom-color: #af0931;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-6 {
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  transform: rotate(-25deg);
  top: 0;
  right: 50%;
  margin: 95px -4px 0 0;
  border-width: 0 68px 13px 17px;
  border-bottom-color: #d61240;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-7 {
  -webkit-transform: rotate(49deg);
  -moz-transform: rotate(49deg);
  -ms-transform: rotate(49deg);
  -o-transform: rotate(49deg);
  transform: rotate(49deg);
  top: 0;
  left: 50%;
  margin: 102px 0 0 0;
  border-width: 0 24px 31px 70px;
  border-bottom-color: #af0931;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-8 {
  -webkit-transform: rotate(-49deg);
  -moz-transform: rotate(-49deg);
  -ms-transform: rotate(-49deg);
  -o-transform: rotate(-49deg);
  transform: rotate(-49deg);
  top: 0;
  right: 50%;
  margin: 102px 0 0 0;
  border-width: 0 70px 31px 24px;
  border-bottom-color: #d61240;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-9 {
  top: 88px;
  left: 50%;
  border-width: 73px 0 38px 67px;
  border-left-color: #9d0329;
  z-index: 2;
}

#volcano-badge .badge .part-outer.part-10 {
  top: 88px;
  right: 50%;
  border-width: 73px 67px 38px 0;
  border-right-color: #cd123d;
  z-index: 2;
}

#volcano-badge .badge .part-inner {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
  z-index: 5;
}

#volcano-badge .badge .part-inner.part-1 {
  top: 60px;
  left: 50%;
  border-width: 24px 0 18px 17px;
  border-left-color: #e6bc12;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-2 {
  top: 60px;
  right: 50%;
  border-width: 24px 17px 18px 0;
  border-right-color: #e6bc12;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-3 {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  top: 0;
  left: 50%;
  height: 35px;
  border-width: 12px 0 9px 22px;
  border-left-color: #d9b312;
  margin: 79px 0 0 13px;
  z-index: 5;
}

#volcano-badge .badge .part-inner.part-3:before, #volcano-badge .badge .part-inner.part-3:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#volcano-badge .badge .part-inner.part-3:before {
  height: 32px;
  border-width: 6px 4px 0 0;
  border-right-color: #d9b312;
  margin: -6px 0 0 -25px;
}

#volcano-badge .badge .part-inner.part-3:after {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
  width: 10px;
  height: 30px;
  border: none;
  background: #d9b312;
  margin: 2px 0 0 -28px;
}

#volcano-badge .badge .part-inner.part-4 {
  -webkit-transform: rotate(-37deg);
  -moz-transform: rotate(-37deg);
  -ms-transform: rotate(-37deg);
  -o-transform: rotate(-37deg);
  transform: rotate(-37deg);
  top: 0;
  right: 50%;
  height: 35px;
  border-width: 12px 22px 9px 0;
  border-right-color: #f0c514;
  margin: 78px 13px 0 0;
}

#volcano-badge .badge .part-inner.part-4:before {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#volcano-badge .badge .part-inner.part-4:before {
  height: 32px;
  border-width: 12px 0 0 7px;
  border-left-color: #f0c514;
  margin: -7px 0 0 21px;
}

#volcano-badge .badge .part-inner.part-5 {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
  top: 0;
  left: 50%;
  margin: 102px 0 0 -4px;
  border-width: 0 7px 6px 34px;
  border-bottom-color: #b2910e;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-6 {
  -webkit-transform: rotate(-18deg);
  -moz-transform: rotate(-18deg);
  -ms-transform: rotate(-18deg);
  -o-transform: rotate(-18deg);
  transform: rotate(-18deg);
  top: 0;
  right: 50%;
  margin: 102px -4px 0 0;
  border-width: 0 34px 6px 7px;
  border-bottom-color: #d9b312;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-7 {
  -webkit-transform: rotate(43deg);
  -moz-transform: rotate(43deg);
  -ms-transform: rotate(43deg);
  -o-transform: rotate(43deg);
  transform: rotate(43deg);
  top: 0;
  left: 50%;
  margin: 102px 0 0 -1px;
  border-width: 0 7px 16px 34px;
  border-bottom-color: #b2910e;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-8 {
  -webkit-transform: rotate(-43deg);
  -moz-transform: rotate(-43deg);
  -ms-transform: rotate(-43deg);
  -o-transform: rotate(-43deg);
  transform: rotate(-43deg);
  top: 0;
  right: 50%;
  margin: 102px -1px 0 0;
  border-width: 0 34px 16px 7px;
  border-bottom-color: #d9b312;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-9 {
  top: 102px;
  left: 50%;
  border-width: 28px 0 16px 30px;
  border-left-color: #9e8006;
  z-index: 10;
}

#volcano-badge .badge .part-inner.part-10 {
  top: 102px;
  right: 50%;
  border-width: 28px 30px 16px 0;
  border-right-color: #cfaa13;
  z-index: 10;
}

#earth-badge {
  background: #474749;
}

#earth-badge .badge {
  position: relative;
  height: 170px;
  width: 170px;
}

#earth-badge .badge .part-leaf {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-leaf.part-top, #earth-badge .badge .part-leaf.part-1, #earth-badge .badge .part-leaf.part-2, #earth-badge .badge .part-leaf.part-3, #earth-badge .badge .part-leaf.part-4, #earth-badge .badge .part-leaf.part-5, #earth-badge .badge .part-leaf.part-6 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border: none;
  right: 0;
  top: 0;
  margin: 7px 7px 0 0;
}

#earth-badge .badge .part-leaf.part-top:before, #earth-badge .badge .part-leaf.part-top:after, #earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-1:after, #earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-2:after, #earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-3:after, #earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-4:after, #earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-5:after, #earth-badge .badge .part-leaf.part-6:before, #earth-badge .badge .part-leaf.part-6:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 29px;
  top: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-leaf.part-top:before, #earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-6:before {
  right: 0;
  margin-right: -1px;
  border-width: 15px 25px 15px 0;
  border-right-color: #4fb96e;
}

#earth-badge .badge .part-leaf.part-top:after, #earth-badge .badge .part-leaf.part-1:after, #earth-badge .badge .part-leaf.part-2:after, #earth-badge .badge .part-leaf.part-3:after, #earth-badge .badge .part-leaf.part-4:after, #earth-badge .badge .part-leaf.part-5:after, #earth-badge .badge .part-leaf.part-6:after {
  left: 0;
  border-width: 15px 0 15px 25px;
  border-left-color: #3c9255;
}

#earth-badge .badge .part-leaf.part-1 {
  -webkit-transform: rotate(-13deg);
  -moz-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  -o-transform: rotate(-13deg);
  transform: rotate(-13deg);
  margin: 5px 75px 0 0;
}

#earth-badge .badge .part-leaf.part-1:before, #earth-badge .badge .part-leaf.part-1:after {
  height: 38px;
}

#earth-badge .badge .part-leaf.part-1:before {
  border-width: 10px 17px 10px 0;
  border-right-color: #4bb168;
}

#earth-badge .badge .part-leaf.part-1:after {
  border-width: 10px 0 10px 17px;
  border-left-color: #4bb168;
}

#earth-badge .badge .part-leaf.part-2 {
  -webkit-transform: rotate(106deg);
  -moz-transform: rotate(106deg);
  -ms-transform: rotate(106deg);
  -o-transform: rotate(106deg);
  transform: rotate(106deg);
  margin: 76px 6px 0 0;
}

#earth-badge .badge .part-leaf.part-2:before, #earth-badge .badge .part-leaf.part-2:after {
  height: 38px;
}

#earth-badge .badge .part-leaf.part-2:before {
  border-width: 10px 17px 10px 0;
  border-right-color: #398f52;
}

#earth-badge .badge .part-leaf.part-2:after {
  border-width: 10px 0 10px 17px;
  border-left-color: #398f52;
}

#earth-badge .badge .part-leaf.part-3 {
  -webkit-transform: rotate(-14deg);
  -moz-transform: rotate(-14deg);
  -ms-transform: rotate(-14deg);
  -o-transform: rotate(-14deg);
  transform: rotate(-14deg);
  margin: 35px 100px 0 0;
}

#earth-badge .badge .part-leaf.part-3:before, #earth-badge .badge .part-leaf.part-3:after {
  height: 38px;
}

#earth-badge .badge .part-leaf.part-3:before {
  border-width: 9px 16px 9px 0;
  border-right-color: #46a060;
}

#earth-badge .badge .part-leaf.part-3:after {
  border-width: 9px 0 9px 16px;
  border-left-color: #46a060;
}

#earth-badge .badge .part-leaf.part-4 {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
  margin: 100px 37px 0 0;
}

#earth-badge .badge .part-leaf.part-4:before, #earth-badge .badge .part-leaf.part-4:after {
  height: 38px;
}

#earth-badge .badge .part-leaf.part-4:before {
  border-width: 9px 16px 9px 0;
  border-right-color: #338249;
}

#earth-badge .badge .part-leaf.part-4:after {
  border-width: 9px 0 9px 16px;
  border-left-color: #338249;
}

#earth-badge .badge .part-leaf.part-5 {
  -webkit-transform: rotate(-17deg);
  -moz-transform: rotate(-17deg);
  -ms-transform: rotate(-17deg);
  -o-transform: rotate(-17deg);
  transform: rotate(-17deg);
  margin: 65px 121px 0 0;
}

#earth-badge .badge .part-leaf.part-5:before, #earth-badge .badge .part-leaf.part-5:after {
  height: 19px;
}

#earth-badge .badge .part-leaf.part-5:before {
  border-width: 9px 16px 9px 0;
  border-right-color: #3a9256;
}

#earth-badge .badge .part-leaf.part-5:after {
  border-width: 5px 0 9px 13px;
  border-left-color: #3a9256;
}

#earth-badge .badge .part-leaf.part-6 {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
  margin: 120px 64px 0 0;
}

#earth-badge .badge .part-leaf.part-6:before, #earth-badge .badge .part-leaf.part-6:after {
  height: 19px;
}

#earth-badge .badge .part-leaf.part-6:before {
  border-width: 5px 13px 9px 0;
  border-right-color: #3a9256;
}

#earth-badge .badge .part-leaf.part-6:after {
  border-width: 9px 0 9px 16px;
  border-left-color: #3a9256;
}

#earth-badge .badge .part-center.part-handle {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 122px;
  right: 124px;
}

#earth-badge .badge .part-center.part-handle:before, #earth-badge .badge .part-center.part-handle:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 65px;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-handle:before {
  left: 0;
  margin-left: -7px;
  border-right-color: #94b464;
  border-right-width: 5px;
}

#earth-badge .badge .part-center.part-handle:after {
  left: 0;
  border-left-color: #84a35b;
  border-left-width: 5px;
}

#earth-badge .badge .part-center.part-1-left, #earth-badge .badge .part-center.part-1-right, #earth-badge .badge .part-center.part-2-left, #earth-badge .badge .part-center.part-2-right, #earth-badge .badge .part-center.part-3-left, #earth-badge .badge .part-center.part-3-right, #earth-badge .badge .part-center.part-4 {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-1-left {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 67px;
  top: 0;
  right: 0;
  margin: 51px 90px 0 0;
  border-width: 0 0 0 25px;
  border-left-color: #a3c86e;
}

#earth-badge .badge .part-center.part-1-left:before, #earth-badge .badge .part-center.part-1-left:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: -25px;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-1-left:before {
  margin-top: -15px;
  border-width: 15px 25px 15px 0;
  border-right-color: #abd275;
}

#earth-badge .badge .part-center.part-1-left:after {
  margin-top: 52px;
  border-width: 15px 25px 15px 0;
  border-right-color: #94b564;
}

#earth-badge .badge .part-center.part-1-right {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 67px;
  top: 0;
  right: 0;
  margin: 68px 73px 0 0;
  border-width: 0 25px 0 0;
  border-right-color: #8dac60;
}

#earth-badge .badge .part-center.part-1-right:before, #earth-badge .badge .part-center.part-1-right:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-1-right:before {
  margin-top: -15px;
  border-width: 15px 0 15px 25px;
  border-left-color: #9bc069;
}

#earth-badge .badge .part-center.part-1-right:after {
  margin-top: 52px;
  border-width: 15px 0 15px 25px;
  border-left-color: #84a45b;
}

#earth-badge .badge .part-center.part-2-left {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 45px;
  top: 0;
  right: 0;
  margin: 66px 92px 0 0;
  border-width: 0 0 0 12px;
  border-left-color: #53af65;
}

#earth-badge .badge .part-center.part-2-left:before, #earth-badge .badge .part-center.part-2-left:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: -12px;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-2-left:before {
  margin-top: -11px;
  border-width: 11px 12px 11px 0;
  border-right-color: #5fbd71;
}

#earth-badge .badge .part-center.part-2-left:after {
  margin-top: 33px;
  border-width: 11px 12px 11px 0;
  border-right-color: #459055;
}

#earth-badge .badge .part-center.part-2-right {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 45px;
  top: 0;
  right: 0;
  margin: 75px 84px 0 0;
  border-width: 0 12px 0 0;
  border-right-color: #3f844e;
}

#earth-badge .badge .part-center.part-2-right:before, #earth-badge .badge .part-center.part-2-right:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-2-right:before {
  margin-top: -11px;
  border-width: 11px 0 11px 12px;
  border-left-color: #4b9c5f;
}

#earth-badge .badge .part-center.part-2-right:after {
  margin-top: 33px;
  border-width: 11px 0 11px 12px;
  border-left-color: #377744;
}

#earth-badge .badge .part-center.part-3-left {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 29px;
  top: 0;
  right: 0;
  margin: 75px 92px 0 0;
  border-width: 0 0 0 6px;
  border-left-color: #59b66b;
}

#earth-badge .badge .part-center.part-3-left:before, #earth-badge .badge .part-center.part-3-left:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: -6px;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-3-left:before {
  margin-top: -6px;
  border-width: 6px 6px 6px 0;
  border-right-color: #54ae65;
}

#earth-badge .badge .part-center.part-3-left:after {
  margin-top: 24px;
  border-width: 6px 6px 6px 0;
  border-right-color: #51a362;
}

#earth-badge .badge .part-center.part-3-right {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 0;
  height: 29px;
  top: 0;
  right: 0;
  margin: 79px 88px 0 0;
  border-width: 0 6px 0 0;
  border-right-color: #4d9f5d;
}

#earth-badge .badge .part-center.part-3-right:before, #earth-badge .badge .part-center.part-3-right:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-3-right:before {
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-left-color: #54ae65;
}

#earth-badge .badge .part-center.part-3-right:after {
  margin-top: 24px;
  border-width: 6px 0 6px 6px;
  border-left-color: #489558;
}

#earth-badge .badge .part-center.part-4 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 6px;
  height: 27px;
  top: 0;
  right: 0;
  margin: 78px 90px 0 0;
  border: none;
  background: #3d9257;
}

#earth-badge .badge .part-center.part-4:before, #earth-badge .badge .part-center.part-4:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  border-style: solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0);
}

#earth-badge .badge .part-center.part-4:before {
  margin-top: -3px;
  border-width: 0 3px 3px 3px;
  border-bottom-color: #3d9257;
}

#earth-badge .badge .part-center.part-4:after {
  top: 100%;
  border-width: 3px 3px 0 3px;
  border-top-color: #3d9257;
}
</style>
</head>
<body>
  <div id="wrapper">
      <div class="row">
        <div id="boulder-badge">
          <div class="badge">
            <div class="part part-1"></div>
            <div class="part part-2"></div>
            <div class="part part-3"></div>
            <div class="part part-4"></div>
            <div class="part part-shade"></div>
          </div>
          <h1>Boulder badge</h1>
        </div>

        <div id="cascade-badge">
          <div class="badge">
            <div class="part part-1"></div>
            <div class="part part-2"></div>
            <div class="part part-3"></div>
            <div class="part part-4"></div>
            <div class="part part-5"></div>
            <div class="part part-6"></div>
            <div class="part part-7"></div>
            <div class="part part-8"></div>
          </div>
          <h1>Cascade badge</h1>
        </div>

        <div id="thunder-badge">
          <div class="badge">
            <div class="part part-1"></div>
            <div class="part part-2"></div>
            <div class="part part-3"></div>
            <div class="part part-4"></div>
            <div class="part part-shade"></div>
          </div>
          <h1>Thunder badge</h1>
        </div>

        <div id="rainbow-badge">
          <div class="badge">
            <div class="part-leaf part-1"></div>
            <div class="part-leaf part-2"></div>
            <div class="part-leaf part-3"></div>
            <div class="part-leaf part-4"></div>
            <div class="part-leaf part-5"></div>
            <div class="part-leaf part-6"></div>
            <div class="part-leaf part-7"></div>
            <div class="part-leaf part-8"></div>
            <div class="part-inner part-1"></div>
            <div class="part-inner part-2"></div>
            <div class="part-inner part-3"></div>
            <div class="part-inner part-4"></div>
          </div>
          <h1>Rainbow badge</h1>
        </div>
      </div>

      <div class="row">
        <div id="soul-badge">
          <div class="badge">
            <div class="part part-1"></div>
            <div class="part part-2"></div>
            <div class="part part-3"></div>
            <div class="part part-4"></div>
            <div class="part part-5"></div>
            <div class="part part-6"></div>
            <div class="part part-7"></div>
            <div class="part part-8"></div>
            <div class="part part-9"></div>
            <div class="part part-10"></div>
            <div class="part part-shade"></div>
          </div>
          <h1>Soul badge</h1>
        </div>

        <div id="marsh-badge">
          <div class="badge">
            <div class="inner"></div>
          </div>
          <h1>Marsh badge</h1>
        </div>

        <div id="volcano-badge">
          <div class="badge">
            <div class="part-outer part-1"></div>
            <div class="part-outer part-2"></div>
            <div class="part-outer part-3"></div>
            <div class="part-outer part-4"></div>
            <div class="part-outer part-5"></div>
            <div class="part-outer part-6"></div>
            <div class="part-outer part-7"></div>
            <div class="part-outer part-8"></div>
            <div class="part-outer part-9"></div>
            <div class="part-outer part-10"></div>

            <div class="part-inner part-1"></div>
            <div class="part-inner part-2"></div>
            <div class="part-inner part-3"></div>
            <div class="part-inner part-4"></div>
            <div class="part-inner part-5"></div>
            <div class="part-inner part-6"></div>
            <div class="part-inner part-7"></div>
            <div class="part-inner part-8"></div>
            <div class="part-inner part-9"></div>
            <div class="part-inner part-10"></div>
          </div>
          <h1>Volcano badge</h1>
        </div>

        <div id="earth-badge">
          <div class="badge">
            <div class="part-leaf part-top"></div>
            <div class="part-leaf part-1"></div>
            <div class="part-leaf part-2"></div>
            <div class="part-leaf part-3"></div>
            <div class="part-leaf part-4"></div>
            <div class="part-leaf part-5"></div>
            <div class="part-leaf part-6"></div>
            <div class="part-center part-handle"></div>
            <div class="part-center part-1-left"></div>
            <div class="part-center part-1-right"></div>
            <div class="part-center part-2-left"></div>
            <div class="part-center part-2-right"></div>
            <div class="part-center part-3-left"></div>
            <div class="part-center part-3-right"></div>
            <div class="part-center part-4"></div>
          </div>
          <h1>Earth badge</h1>
        </div>
      </div> 
</body>
</html>

5. Develop Denver Badge

Made by Michael Arestad. Source

Develop Denver Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
  background: #f4f4f4;
}

.dvlpdnvr {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  padding: 158px 0 0 0;
}
.dvlpdnvr h1,
.dvlpdnvr h2 {
  position: relative;
  width: 222px;
  margin: 0 auto;
  text-align: center;
  color: #6e120f;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}
.dvlpdnvr h1 {
  font-size: 19px;
  text-transform: uppercase;
  border-top: 1px solid #972d29;
  padding-top: 18px;
}
.dvlpdnvr h2 {
  width: 202px;
  padding-bottom: 10px;
  font-size: 62px;
  border-bottom: 1px solid #972d29;
  letter-spacing: 15px;
  text-indent: 10px;
}

.shield {
  position: absolute;
  top: 3px;
  left: 2px;
}

.shield-bg {
  fill: #bd3735;
}

.shield-border {
  fill: #901f20;
}

.logo {
  position: absolute;
  top: 50px;
  left: 108px;
  width: 80px;
  height: 70px;
  font-size: 17px;
  color: #561717;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
}
.logo div {
  position: absolute;
}
.logo:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 84px;
  height: 1px;
  background: #561717;
  box-shadow: -1px 4px 3px rgba(0, 0, 0, 0.2);
  transform: rotate(-45deg) translate(-2px, -1px);
}
.logo:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 84px;
  height: 1px;
  background: #561717;
  box-shadow: 4px 1px 3px rgba(0, 0, 0, 0.2);
  transform: rotate(45deg) translate(-1px, 2px);
}

.d {
  top: 26px;
  left: 9px;
}

.v {
  top: 26px;
  left: 58px;
}

.l {
  top: 4px;
  left: 34px;
}

.p {
  bottom: 1px;
  left: 34px;
}

.ribbon {
  width: 160px;
  height: 121px;
  position: absolute;
  top: 0;
  left: 1px;
  overflow: hidden;
  transform: rotate(-7deg);
}

.mask {
  width: 160px;
  height: 121px;
  position: absolute;
  top: 0;
  left: -1px;
  overflow: hidden;
  transform: rotate(7deg);
}

.tickets {
  box-sizing: border-box;
  position: relative;
  padding: 11px 0 11px 21px;
  top: 27px;
  left: -36px;
  width: 173px;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  text-align: left;
  transform-origin: center top;
  transform: rotate(-40deg);
  background-color: #4bcae1;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}

.tickets:before,
.tickets:after {
  content: "";
  border-top: 3px solid #6e8900;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position: absolute;
  bottom: -3px;
}

.tickets:before {
  left: 0;
}

.tickets:after {
  right: 0;
}

.header {
  content: "";
  height: 340px;
  background: url(http://developdenver.org/images/header_background.jpg) center center no-repeat;
  background-size: cover;
  border-bottom: 5px solid #dce2e5;
}
</style>
</head>
<body>
  <script type="text/javascript" src="//use.typekit.net/dsj1dpv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="header"></div>

<div class="dvlpdnvr">
  <svg class="shield" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="299px" height="334.571px" viewBox="0 0 299 334.571" enable-background="new 0 0 299 334.571" xml:space="preserve">
  <g>
    <polygon class="shield-bg" fill="#231F20" points="31.176,298.203 4.381,4 294.619,4 267.824,298.203 149.5,330.426 	"/>
    <path class="shield-border" fill="#808285" d="M290.238,8l-26.146,287.074L149.5,326.28L34.907,295.074L8.762,8H149.5H290.238 M299,0H149.5H0
      l27.444,301.333L149.5,334.571l122.056-33.238L299,0L299,0z"/>
  </g>
  </svg>
  <div class="logo">
    <div class="d">D</div>
    <div class="l">L</div>
    <div class="v">V</div>
    <div class="p">P</div>
  </div>
  <h1>Develop Denver</h1>
  <h2>2013</h2>
  <div class="ribbon">
    <div class="mask">
      <div class="tickets">Tickets on sale</div>
    </div>
  </div>
</div>
</body>
</html>

6. Download App Badge

Made by Mohammad Jamal Dashtaki. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.app-download {
  display: flex;
  justify-content: space-around;
  align-items: center;
  direction: rtl;
  background-color: #dc1e4d;
  top: 0;
  position: fixed;
  flex-direction: column;
  z-index: 100;
  left: 2rem;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  box-shadow: 1px 2px 14px 5px #00000070;
  padding: 1rem;
}
.app-download:focus {
  outline: none;
}
.app-download label {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: #fff;
  cursor: pointer;
}
.app-download label#first-title {
  font-size: 1rem;
}
.app-download label#second-title {
  font-size: 0.8rem;
}
.app-download .fa-mobile-phone {
  color: #fff;
  font-size: 2.5rem;
  width: 45px;
  height: 45px;
  display: flex;
  border: 2px dotted #fff;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0.5rem 0;
  cursor: pointer;
}
.app-download .close-download-app {
  color: #fff;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  cursor: pointer;
}

.bounce {
  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
  animation-iteration-count: infinite;
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
  -webkit-animation-iteration-count: infinite;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 3px, 0);
  }
}
@-webkit-keyframes bounce {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
  }
}
</style>
</head>
<body>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <div class="app-download">
      <label id="first-title">Download Our App</label>
      <label id="second-title">!Download Now</label>
      <i class="fa fa-mobile-phone bounce"></i>
      <a class="close-download-app fa fa-close"></a>
  </div>
</body>
</html>

7. Badge

Made by Simon Wuyts. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html,
body {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

body {
  box-sizing: border-box;
}
body *,
body *:before,
body *:after {
  box-sizing: inherit;
}

@-webkit-keyframes introduceBadge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes introduceBadge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes pulseBadge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseBadge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pulseBadge2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseBadge2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.badge {
  -webkit-animation: introduceBadge 1s linear 0s 1 both;
          animation: introduceBadge 1s linear 0s 1 both;
  background: rgba(0, 113, 246, 0.2);
  border-radius: 50%;
  height: 136px;
  perspective: 600px;
  position: relative;
  width: 136px;
}
.badge:before, .badge:after {
  -webkit-animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
          animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
  border: 2px dashed #0071f6;
  border-radius: inherit;
  bottom: -16px;
  content: "";
  left: -16px;
  opacity: 0.2;
  position: absolute;
  right: -16px;
  top: -16px;
}
.badge:after {
  -webkit-animation-name: pulseBadge2;
          animation-name: pulseBadge2;
  bottom: -32px;
  left: -32px;
  opacity: 0.1;
  right: -32px;
  top: -32px;
}

@-webkit-keyframes introduceLabel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(20deg);
  }
}

@keyframes introduceLabel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(20deg);
  }
}
@-webkit-keyframes rotateLabel {
  0% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateY(-20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
}
@keyframes rotateLabel {
  0% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
  50% {
    transform: translate(-50%, -50%) rotateY(-20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
}
.badge__label {
  -webkit-animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both, rotateLabel 5s linear 3s infinite;
          animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both, rotateLabel 5s linear 3s infinite;
  color: #0071f6;
  font: 900 88px/1 -apple-system, BlinkMacSystemFont;
  left: 50%;
  position: absolute;
  text-align: center;
  text-shadow: 0px 4px 8px rgba(0, 113, 246, 0.2);
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
  <div class="badge">
  <div class="badge__label">+10</div>
</div>
</body>
</html>

8. Google Partner Badge

Made by Maciej LeszczyΕ„ski. Source

Google Partner Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,500,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> 
<style>
html,
body {
  font: 16px Open sans, sans-serif;
}

.google-badge {
  margin-top: 50px;
}

.google-badge__inner {
  display: flex;
  align-items: center;
  padding-top: 3.75em;
  padding-bottom: 3.75em;
  border: solid 1px #e5e5e5;
  border-right: none;
  border-left: none;
}
@media (max-width: 36.25em) {
  .google-badge__inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.google-badge__img {
  width: 14.6875em;
}
@media (min-width: 36.3125em) {
  .google-badge__img {
    margin-right: 1.875em;
  }
}
.google-badge__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #777;
}
@media (max-width: 36.25em) {
  .google-badge__text {
    text-align: center;
    margin-top: 1.6666666667em;
  }
}
.google-badge__text p {
  margin: 0;
}
.google-badge__title {
  margin: 0 0 0.4em;
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.3;
}
.google-badge__leafs {
  fill: #e5e5e5;
  transform-origin: center;
}
@media (max-width: 45.625em) {
  .google-badge__leafs {
    display: none;
  }
}
.google-badge__leafs--right {
  transform: rotateY(180deg);
}
</style>
</head>
<body>
  <section class="google-badge">
    <div class="container google-badge__inner">
        <svg class="google-badge__leafs"><use xlink:href="#leafs"></use></svg>
        <img class="google-badge__img" src="https://lh3.googleusercontent.com/ZvO9XVMuwyEgej0f4HHlUiqv82xzRnZib7ghbDJ0eULGZ4g9LB-bBSfXYpfPb-1G-g=w336-h130" alt="" />
        <div class="google-badge__text">
            <h1 class="google-badge__title">Google Partner Accredited</h1>
            <p>Only agencies that achieve the high standards set by Google can be <a href="https://www.google.com/partners/">certified as Google Partners</a>, providing trusted online marketing solutions.</p>
        </div>
        <svg class="google-badge__leafs google-badge__leafs--right"><use xlink:href="#leafs"></use></svg>
    </div>
</section>

<svg>
    <defs>
        <symbol id="leafs" viewBox="0 0 89.32 172">
            <path d="M89.32,168.86L88.13,172c-6.9-2.46-14.37-5.45-21.34-9.3c-1.39,2.64-4.11,4.5-6.81,5.58c-4.84,1.94-10.88,2.22-15.92,0.89c-0.95-0.25-1.93-0.56-2.78-1.05c0.3-1.62,1.4-3.11,2.61-4.18c3.59-3.18,8.94-3.74,13.52-3.37c2.76,0.22,5.51,0.75,8.18,1.46c-4.45-2.53-8.72-5.43-12.51-8.88c-1.06,2.47-3.84,3.95-6.28,4.67c-5.04,1.48-11.17,1.07-16.1-0.71c-0.93-0.34-1.89-0.73-2.72-1.29c0.23-1.51,1.4-2.82,2.59-3.68c3.99-2.86,9.92-2.71,14.49-1.78c2.58,0.53,5.12,1.34,7.55,2.38c-3.35-2.97-6.68-6.14-9.83-9.49c-2.25,2.48-5.77,3.61-9.03,3.71c-5.47,0.16-11.29-2.1-15.62-5.39c-0.85-0.65-1.7-1.35-2.4-2.16c0.92-1.51,2.56-2.63,4.16-3.3c4.5-1.89,9.92-0.87,14.19,1.14c2.66,1.25,5.15,2.88,7.47,4.68c-3.92-4.31-7.51-8.91-10.42-13.82c-2.33,2.31-5.98,2.93-9.12,2.83c-5.69-0.17-11.51-2.34-15.95-5.91c-0.88-0.71-1.74-1.47-2.46-2.34c1.6-1.6,3.34-2.79,5.55-3.42c5.14-1.46,10.62,0.4,15.08,2.99c2.18,1.26,4.22,2.77,6.1,4.45c-1.97-3.49-3.58-7.13-4.72-10.92c-3.27,1.33-7.2,0.84-10.48-0.14c-5.3-1.58-9.74-4.72-13.13-9.07c-0.72-0.93-1.41-1.89-1.99-2.92c0.88-0.76,2.59-1.01,3.68-1.17c3.08-0.47,6.23,0.13,9.06,1.42c5.01,2.29,9.26,6.35,12.53,10.74c-0.9-3.2-1.49-6.52-1.91-9.81c-4.81-0.82-9.34-3.49-12.93-6.7c-3.66-3.27-5.93-7.85-7.11-12.56c-0.27-1.07-0.5-2.16-0.62-3.25c0.46-0.28,1.73-0.01,2.22,0.04c1.77,0.18,3.51,0.62,5.15,1.31c5.16,2.16,8.32,6.61,10.19,11.74c0.97,2.67,1.53,5.6,2.93,8.1c-0.58-5.07-0.63-10.23-0.11-15.37c-3.73-0.97-6.77-4.2-8.96-7.18c-3.27-4.44-4.73-9.73-4.79-15.21c-0.01-1.19,0.02-2.39,0.18-3.57c0.46-0.09,1.28,0.33,1.69,0.48c1.35,0.49,2.64,1.15,3.84,1.96c3.84,2.59,6.12,6.5,7.21,10.94c0.75,3.04,1.09,6.19,1.23,9.31c0.62-4.39,1.7-8.74,3.05-12.97c-3.06-1.25-5.05-5.05-6.44-7.79c-2.38-4.7-2.94-9.96-2.27-15.15c0.15-1.18,0.36-2.37,0.68-3.53c0.68,0,1.59,0.58,2.16,0.89c1.56,0.85,2.94,2.01,4.06,3.39c4.06,5,3.97,12.04,3.22,18.11c1.71-4.52,3.68-9,6.01-13.24c-4.3-2.1-6.58-6.74-7.56-11.2c-1.01-4.59-0.83-9.68,1.67-13.78c0.44-0.71,0.93-1.42,1.54-1.99c0.62,0.04,1.61,1.2,1.99,1.58c1.4,1.37,2.54,3,3.38,4.77c2.76,5.77,2.07,12.55,0.18,18.47c2.43-4.22,5.04-8.44,8.02-12.3c-2.38-4.44-3.39-9.8-3.07-14.8c0.26-4.03,1.61-8.22,4.73-10.94c0.54-0.47,1.13-0.9,1.77-1.21c0.74,0.81,1.03,2.38,1.31,3.4c0.62,2.23,0.99,4.54,1.05,6.85c0.11,5.04-1.75,9.96-4.06,14.37c2.97-3.89,6.15-7.75,9.42-11.44c-1.74-3.97-1.95-8.68-1.61-12.94c0.35-4.35,1.97-8.66,5.05-11.82c0.57-0.58,1.18-1.14,1.87-1.59c0.77,1.1,1,2.67,1.21,3.96c0.36,2.23,0.46,4.51,0.34,6.76c-0.25,4.57-1.71,8.84-4.18,12.68c1.93-2.13,3.9-4.25,6.07-6.14v-0.01c1.22-2.19,2.77-4.19,4.45-6.04C70,8.47,72.8,5.76,76.26,4.36c3.52-1.43,7.88-1.62,11.44-0.14c-0.4,1.9-2.2,3.77-3.43,5.19c-2.02,2.34-4.33,4.53-6.97,6.16c-4.06,2.53-9.51,2.74-14.18,2.7c-3.26,2.84-6.09,6.17-8.89,9.45c3.38-2.73,7.43-4.39,11.74-4.93c4.05-0.51,8.51-0.22,12.11,1.87c-4.89,6.05-13.7,7.67-21.01,6.51c-1.59-0.25-3.14-0.68-4.62-1.32c-2.85,3.44-5.58,6.98-8.17,10.58c3.22-2.73,7.16-4.44,11.32-5.07c4-0.61,7.61-0.16,11.13,1.87c-4.1,5.97-13.04,7.43-19.66,6.23c-1.4-0.26-2.71-0.71-3.99-1.34c-3.04,4.35-5.62,8.61-7.9,13.73c3.41-3.96,7.81-6.93,12.85-8.38c2.2-0.63,4.5-0.95,6.78-0.65c1.63,0.21,3.17,0.75,4.7,1.32c-2.4,3.58-5.42,6.88-9.34,8.82c-4.85,2.39-10.79,2.55-15.94,1.14c-1.53,3.72-3.08,7.61-4.42,11.58c3.17-4.16,7.38-7.39,12.33-9.13c3.82-1.35,7.36-1.17,11.18-0.05c-2.1,3.71-4.85,7.18-8.55,9.39c-4.62,2.77-10.56,3.41-15.79,2.38c-1.62,5.21-2.74,10.56-3.13,16.01c3.46-4.68,6.04-10.05,11.06-13.34c2.04-1.34,4.35-2.11,6.79-2.18c1.87-0.05,3.68,0.33,5.53,0.51c-2.48,4.66-5.31,9.07-9.74,12.13c-4.04,2.79-8.85,3.72-13.68,3.58c-0.31,4.8-0.1,9.62,0.62,14.33c2.7-4.64,5.19-9.63,9.43-13.1c1.84-1.5,4-2.5,6.35-2.83c1.78-0.25,3.55-0.09,5.34-0.11C45.64,92.06,43,96.54,39.09,100c-3.5,3.1-7.87,4.37-12.46,4.45c0.68,3.9,1.72,7.72,3.13,11.42c2.6-4.18,4.22-8.95,7.6-12.61c1.68-1.82,3.79-3.11,6.17-3.76c1.9-0.52,3.85-0.6,5.8-0.78c-1.44,4.68-3.54,8.98-6.93,12.57c-1.8,1.9-3.96,3.32-6.47,4.11c-1.93,0.6-3.93,0.78-5.89,1.25c1.61,4.01,3.63,7.85,5.97,11.51c1-2.36,1.54-4.83,2.2-7.29c0.64-2.41,1.68-4.57,3.21-6.56c1.27-1.65,2.85-3.07,4.81-3.85c1.47-0.59,3.05-0.75,4.61-0.9c-1.24,3.55-2.06,7.36-3.92,10.64c-1.19,2.1-2.52,4.09-4.5,5.52c-1.85,1.33-4.01,2.03-6.06,2.96c2.2,3.38,4.66,6.62,7.32,9.7c0.5-2.31,0.45-4.59,0.55-6.93c0.1-2.39,0.86-4.66,1.99-6.76c0.92-1.7,2.16-3.24,3.81-4.28c1.32-0.83,2.82-1.28,4.31-1.72c-0.32,3.92-0.18,7.67-1.83,11.35c-1.77,3.95-5.11,6.24-8.46,8.76c3.33,3.84,6.95,7.44,10.68,10.81c-1.91-3.65-2.36-8.16-2.15-12.21c0.18-3.53,1.58-7.15,4.86-8.85c0.59-0.3,1.23-0.56,1.88-0.67c2.15,4.28,2.61,9.44,1.49,14.06c-0.74,3.06-2.39,6.88-5.56,8.15c3.3,2.97,6.83,5.62,10.61,7.95c-1.99-4.3-2.84-9.49-1.98-14.17c0.47-2.61,1.74-5.35,4.33-6.42c0.45-0.19,0.94-0.33,1.44-0.36c1.75,3.51,2.57,7.74,2.26,11.64c-0.29,3.67-1.5,7.87-4.6,10.17C74.31,163.04,81.96,166.23,89.32,168.86z"/>
        </symbol>
    </defs>
</svg>
</body>
</html>
 

9. Beta badge

Made by Nicklas Sandell. Source

Beta badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  background: #EDF1EE;
}
.wrapper {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #FFF;
  border: 1px solid #D4E0D7;
}
.badge {
  height: 50px;
  background: #58C777;
  width: 200px;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  font-family: sans-serif;
  color: #FFF;
  transform: rotate(-45deg);
  position: relative;
  top: -2px;
  left: -70px;
  box-shadow: inset 0px 0px 0px 4px rgba(255, 255, 255, 0.34);
}
.badge:after {
  position: absolute;
  content: '';
  display: block;
  height: 100px;
  width: 100px;
  background: #EDF1EE;
  top: -55px;
  left: 130px;
  transform: rotate(-45deg);
  box-shadow: -115px -121px 0px 0px #EDF1EE;
}
.badge .left {
  position: absolute;
  content: '';
  display: block;
  top: 50px;
  left: 25px;
  height: 8px;
  width: 8px;
  background: linear-gradient(135deg, #5a926a 50%, rgba(90, 146, 106, 0) 50.1%);
}
.badge .right {
  position: absolute;
  content: '';
  display: block;
  top: 50px;
  left: 157px;
  height: 8px;
  width: 8px;
  background: linear-gradient(135deg, #5a926a 50%, rgba(90, 146, 106, 0) 50.1%);
  transform: rotate(90deg);
}
</style>
</head>
<body>
  <div class="wrapper">
	<div class="badge">
    	<i class="left"></i>
    	<i class="right"></i>
    	BETA
	</div>
</div>
</body>
</html>

10. CSS Badge

Made by Eduardo Grigolo. Source

CSS Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* General Styles */
*, *:after, *:before {
  box-sizing: border-box;
}

html {
  background: #7f7f80;
}

/* Mixins */
/* Variables */
/* Bagde Styles */
.badge {
  position: relative;
  height: 166px;
  width: 100px;
  margin: 100px auto;
}
.badge .dotted {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
  background: white;
}
.badge .dotted:before, .badge .dotted:after {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  border-radius: 50%;
}
.badge .dotted:before {
  content: "";
  z-index: 2;
  top: 5px;
  width: 90px;
  height: 90px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.8), inset 0px 0px 5px 1px rgba(0, 0, 0, 0.4);
  background: #2989d8;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF7ABCFF', endColorstr='#FF4096EE');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdmYjllOCIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjNTRhMWUwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7fb9e8), color-stop(60%, #54a1e0), color-stop(100%, #2989d8));
  background-image: -moz-linear-gradient(top, #7fb9e8 0%, #54a1e0 60%, #2989d8 100%);
  background-image: -webkit-linear-gradient(top, #7fb9e8 0%, #54a1e0 60%, #2989d8 100%);
  background-image: linear-gradient(to bottom, #7fb9e8 0%, #54a1e0 60%, #2989d8 100%);
}
.badge .dotted:after {
  content: "";
  z-index: 3;
  top: 10px;
  width: 80px;
  height: 80px;
  border: 1px dashed white;
  font-size: 50px;
  color: white;
  text-align: center;
  text-shadow: 0px 0px 4px #262626;
  padding-top: 8px;
  padding-right: 2px;
}
.badge .bubble {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: relative;
  z-index: 4;
  top: 25px;
  width: 50px;
  height: 50px;
  padding: 0px;
  background: white;
  border-radius: 50%;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
}
.badge .bubble:before {
  content: attr(data-icon);
  text-align: center;
  font-size: 25px;
  color: #2989d8;
  display: block;
  padding-top: 11px;
  padding-right: 2px;
}
.badge .bubble:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -4px;
  left: 5px;
  width: 0;
  border-style: solid;
  border-width: 10px 4px 0;
  border-color: #FFFFFF transparent;
  z-index: 1;
  transform: rotate(35deg);
}
.badge .tail {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  z-index: 0;
  top: 88px;
  height: 70px;
  width: 62px;
  background: #2989d8;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2989D8', endColorstr='#FF2989D8');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYTZlMSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4Ii8+PHN0b3Agb2Zmc2V0PSI3NiUiIHN0b3AtY29sb3I9IiMyOTg5ZDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZGE2ZTEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5da6e1), color-stop(60%, #2989d8), color-stop(76%, #2989d8), color-stop(100%, #5da6e1));
  background-image: -moz-linear-gradient(top, #5da6e1 0%, #2989d8 60%, #2989d8 76%, #5da6e1 100%);
  background-image: -webkit-linear-gradient(top, #5da6e1 0%, #2989d8 60%, #2989d8 76%, #5da6e1 100%);
  background-image: linear-gradient(to bottom, #5da6e1 0%, #2989d8 60%, #2989d8 76%, #5da6e1 100%);
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.4);
}
.badge .tail:before, .badge .tail:after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -15px;
  width: 0px;
  height: 0px;
  border-style: solid;
}
.badge .tail:before {
  border-width: 15px 31px 0 0;
  border-color: #5da6e1 transparent transparent transparent;
}
.badge .tail:after {
  right: 0;
  border-width: 0 31px 15px 0;
  border-color: transparent #5da6e1 transparent transparent;
}
.badge .tail .inner {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
  height: 75px;
  width: 50px;
  border-left: 1px dashed white;
  border-right: 1px dashed white;
}
</style>
</head>
<body>
  <div class="badge">
  <div class="dotted">
    <div class="bubble" data-icon="!"></div>
  </div>
  <div class="tail">
    <div class="inner"></div>
  </div>
</div>
</body>
</html>

11. Simple CSS badge

Made by Kitty Giraudel. Source

Simple CSS badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Cutive);
@import url(https://fonts.googleapis.com/css?family=Advent+Pro);
* {
  box-sizing: border-box;
}

body {
  background: #e1e1e1;
}

.main {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  background: #fcfcfc;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2), 0 3px 2px rgba(0, 0, 0, 0.2);
  line-height: 130px;
  font-weight: bold;
  color: #505b65;
  text-align: center;
  font-size: 50px;
  font-family: 'Cutive', serif;
}

.main span {
  color: #f15755;
}

.main .role {
  text-transform: uppercase;
  position: absolute;
  font-family: 'Advent Pro', sans-serif;
  font-size: 12px;
  color: #a2a7ac;
  left: 29px;
  bottom: 39px;
  line-height: 1;
  text-align: right;
}

.main:after {
  content: "";
  position: absolute;
  border-radius: inherit;
  z-index: -1;
  background: #c8c8c8;
  background: linear-gradient(#c8c8c8, #dcdcdc);
  left: -15px;
  top: -15px;
  right: -15px;
  bottom: -15px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9);
}

.main:before {
  content: "";
  position: absolute;
  height: 3px;
  width: 30px;
  background: #c8c8c8;
  border-radius: 40px;
  left: 47%;
  bottom: 40px;
}
</style>
</head>
<body>
  <div class="main">hg<span>.</span><span class="role">front<br>end</span></div>
</body>
</html>