Drawing a folder icon with CSS - css

Question

I'm playing around trying to draw a simple folder icon with CSS, and this is where I'm at:
/* CSS */
.container {
border: solid 1px #000;
width: 100px;
height: 100px;
padding: 5px;
text-align: center;
}
.folder_tab, .folder {
margin: 0 auto;
background-color: #708090;
}
.folder_tab {
width: 25px;
height: 5px;
margin-right: 50%;
border-radius: 5px 15px 0 0;
}
.folder {
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
}
<!-- HTML -->
<div class="container">
<div class="folder_tab"></div>
<div class="folder"></div>
text
</div>
Result:
Is there a simpler, or more elegant way to do this?

Answer 1

This is my solution, if you want to use CSS3.
HTML
<div class="folder"></div>
CSS
.folder {
width: 150px;
height: 105px;
margin: 0 auto;
margin-top: 50px;
position: relative;
background-color: #708090;
border-radius: 0 6px 6px 6px;
box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}
.folder:before {
content: '';
width: 50%;
height: 12px;
border-radius: 0 20px 0 0;
background-color: #708090;
position: absolute;
top: -12px;
left: 0px;
}
DEMO (tested in Chrome)

Answer 2

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

Answer 3

Here is my solution:
http://jsfiddle.net/wQdgs/
HTML
<div>text</div>
CSS
div {
width: 100px;
height: 50px;
padding-top: 50px;
border: solid 1px #000;
position: relative;
text-align: center;
}
div:after {
content: " ";
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
display: block;
background-color: #708090;
position: absolute;
top: 15px;
left: 25px;
}
div:before {
content: " ";
width: 25px;
height: 5px;
border-radius: 5px 15px 0 0;
display: block;
background-color: #708090;
position: absolute;
top: 10px;
left: 25px;
}