I know this thread is a bit old, but I bounced into this question by asking myself if there was something simple in pure CSS and minimalistic HTML to update my old tree library which uses background images for icons.
I tried by myself and I came up with something in line with the flat design which today is revolutioning cross-devices UI's:
https://jsfiddle.net/landzup/Lzjadp5r/
It is just a suggestion or a starting point, but it is amazing watching the page not losing a single pixel of resolution by zooming in as much as possible! (Just like vector graphics).
I used a brief HTML:
<div class="folder">
<div class="icon"></div>
Programming
</div>
And this is the CSS:
<style type="text/css">
.folder {
display: block;
position: relative;
top: 0;
left: 0;
margin: 18px 0;
font: 18px helvetica, arial, sans-serif;
text-indent: 27px;
line-height: 34px;
}
.folder .icon {
content: "";
display: block;
float: left;
position: relative;
top: 0;
left: 0;
width: 30px;
height: 30px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
}
.folder .icon::after {
content: "";
display: block;
position: relative;
top: 7px;
left: -6px;
width: 30px; height: 21px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
}
</style>
It uses CSS 3 transformations, so you should consider your target audience to support its browsers.
Here there are CSS compatibility tables for CSS transformation:
http://caniuse.com/#feat=transforms2d