Shield.io-like SCSS shields: http://jsbin.com/nebucot/1/edit?html,css,output

_shield.scss

.shield
{
  font-family: "Helvetica", sans-serif;
  font-size: 12px;
  color: #FFF;
  text-shadow: 0px 0.07em 0px rgba(0,0,0,0.3);
  margin: 4px;
  
  & > *
  {
    display: inline-block;
    padding: 0.3em;
    min-height: 14px;
    vertical-align: bottom;
  }
  
  & > *:first-child
  {
    border-top-left-radius: 0.35em;
    border-bottom-left-radius: 0.35em;
    padding-left: 0.6em;
    background: linear-gradient(#5C5C5C, #4A4A4A); 
  }
  & > *:nth-child(2)
  {
    border-top-right-radius: 0.35em;
    border-bottom-right-radius: 0.35em;
    padding-right: 0.6em;
    background: linear-gradient(#4BBB1F, darken(#4BBB1F, 6%));
    
    $colors: (green: #4BBB1F,
      red: #DC6650, 
      blue: #1283C3,
      yellow: #DBB327,
      orange: #F48041,
      gray: #A0A0A0);
      
    @each $name, $val in $colors
    {
      &.#{$name}
      {
        background: linear-gradient($val, darken($val, 6%));
      }
    }
  }
}

usage.html

<div class="shield"><span>build</span><span>passing</span></div>
<div class="shield"><span>build</span><span class="red">failing</span></div>
<div class="shield"><span>version</span><span class="blue">2.4.5</span></div>
<div class="shield"><span>build</span><span class="yellow">warnings</span></div>
<div class="shield"><span>contributors</span><span class="orange">100+</span></div>
<div class="shield"><span>version</span><span class="gray"></span></div>

Like the shields/badges I've seen around on GitHub, npm, etc in markdown files but instead in SCSS. The linked jsbin at the top has a demo so you can see the compiled CSS output along with the test markup.