2

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: enter image description here

Is there a simpler, or more elegant way to do this?

1
  • Simpler and more elegant way: use an image. There is no point in using css for that. If you want it scalable/animatable use svg.
    – darthmaim
    Apr 6, 2013 at 23:15
11

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)

2

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;
}
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.