Pure CSS File Icon

HTML

<h1>Pure CSS File Icon</h1>
<p>Tested in Chrome, Safari 5+, Firefox 21, and IE8+</p>

<h2>element containing extension (div, span, i, etc)</h2>
<p>
    <div class="file">ZIP</div>
</p>
<br>
<h2>link, with extension data attribute</h2>
<p>
    <a class="file" href="example.zip" data-extension="json">example file</a>
</p>
<footer>
<p>
    Created by <a href="http://jaredscheel.com" target="_top">Jared A. Scheel</a>, while making a theme for <a href="https://populr.me" target="_top">Populr.me</a>. Use however you want.
</p>
<p>
    Check out our <a href="http://developers.populr.me" target="_top">developer documentation</a> if you want to learn how to make your own Populr.me themes.
</p>
</footer>

CSS

.file {
  position: relative;
  display: block;
  width: 150px;
  height: 190px;
  border-radius: 10px;
  background: #ccc;
  color: #888;
  font: bold 40px/210px Verdana;
  text-align: center;
  text-transform: uppercase;
}
.file:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 60px;
  height: 60px;
  border-bottom-left-radius: 10px;
  background: #aaa;
}
.file:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 60px 0;
  /* change #fff to color of your background. This doesn't work on non-solid backgrounds, but it's a trade-off for compatibility's sake. If you don't care about that, then you can get rid of this psuedo-element and use angled background gradients fading to transparent instead. */
  border-color: transparent #fff transparent transparent;
}

a.file {
  text-indent: 180px;
  text-decoration: none;
  overflow: visible;
  white-space: nowrap;
}

a.file:before {
  content: attr(data-extension);
  text-indent: -90px;
  /* IE8 hack, I really suggest using Paul Irish's conditional HTML classes instead: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither */
  text-indent: -55px\9;
}

/* other styles, not needed for file icon */
body {
    background: #fff;
    font: 14px/1.2 Verdana;
    color: #333;
}
footer {
    font-size: 0.8em;
}