CodePen

HTML

            
              Line before contains some stuff.<br/>
As if a <span class="npm">Node Packaged Modules</span> logo would be here.<br/>Give me another line.
            
          
!

CSS

            
              body {
  font-family: 'Trebuchet MS', sans-serif;
  text-align: center;
}

.npm {
  background-color: white;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #CB3837, #CB3837),
    linear-gradient(to bottom, #CB3837, #CB3837),
    linear-gradient(to bottom, #CB3837, #CB3837),
    linear-gradient(to bottom, #CB3837, #CB3837),
    linear-gradient(to bottom, #CB3837, #CB3837),
    linear-gradient(to bottom, #CB3837, #CB3837);
  background-position: 4em 0em, 9em 0, 2em 1em, 12em 1em, 14em 1em, 7em 1em;
  background-size: 1em 5em, 1em 5em, 1em 4em, 1em 4em, 1em 4em, 1em 3em;
  border: 1em solid #CB3837;
  color: transparent;
  display: inline-block;
  font-size: .125em;
  font-size-adjust: .625;
  height: 5em;
  margin-bottom: 1em;
  text-align: center;
  vertical-align: middle;
  width: 16em;
}

.npm:before {
  background: white;
  border: inherit;
  border-top: 0;
  content: '';
  display: block;
  height: 1em;
  left: 4em;
  position: relative;
  top: 5em;
  width: 2em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // http://css-tricks.com/forums/discussion/24808/a-random-saturday-css-challenge
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................