Multi-color CSS shield badge

by thirdender

HTML

<a href="https://nucleaus.com/" rel="noopener noreferrer" target="_blank" class="shieldBadge">
  nucleaus
  <span class="critical">31<span class="sr-only"> critical vulnerabilities</span></span>
  <span class="high">31</span>
  <span class="medium">31</span>
  <span class="low">31</span>
</a>

CSS

body {
  background: #333;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.shieldBadge,
.shieldBadge span {
  display: inline-block;
  padding: 4px 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset;
  background-image: linear-gradient(rgba(255, 255, 255, .2), transparent);
}
.shieldBadge {
  display: inline-flex;
  font: 10px sans-serif;
  color: white;
  background-color: #3a3a3a;
  text-shadow: 0 1px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  cursor: default;
}
a.shieldBadge {
  text-decoration: none;
  cursor: pointer;
}
.shieldBadge span {
  vertical-align: top;
  margin: -4px 0;
  padding-left: 4px;
  background-color: #5c7a1f;
}
.shieldBadge span:first-child {
  margin-left: 4px;
}
.shieldBadge span:last-child {
  margin-right: -6px;
  border-radius: 0 3px 3px 0;
}
.shieldBadge .critical {
  background-color: #fb4545;
}
.shieldBadge .high {
  background-color: #ff9139;
}
.shieldBadge .medium {
  background-color: #f5b213;
}
.shieldBadge .low {
  background-color: #ccd42a;
}