Im looking to generate a double sided arrow on a div. I was able to generate on the 'after' but before is not working. How can I do it?
div {
width: 5px;
height: 220px;
background-color: red;
/* Rotate div */
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
position: relative;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-style: solid;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-style: solid;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
<div></div>
View on JSFiddle
You have the same rule for both :before and :after. Just adjust it sligtly and you're golden.
div {
width: 5px;
height: 220px;
background-color: red;
/* Rotate div */
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
position: relative;
}
div:before,
div:after {
content: '';
position: absolute;
left: 0;
border-style: solid;
border-color: red transparent;
}
div:after {
top: 0;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
}
div:before {
bottom: 0;
transform: translate(-40%, 50%);
border-width: 20px 10px 0 10px;
}
<div></div>
Hi have update your fiddle:
https://jsfiddle.net/p6tryx79/1/
div {
width: 5px;
height: 120px;
background-color: red;
/* Rotate div */
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: bottom left;
position: relative;
margin-left:30px;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-style: solid;
transform: translate(-40%, -50%);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
div:before {
content: '';
position: absolute;
bottom: -6px;
left: -4px;
border-style: solid;
transform: rotate(60deg);
border-width: 0 10px 20px 10px;
border-color: transparent transparent red transparent;
}
Related
I want to cut out my div element from center like a 'V' shape using CSS3.
I hope someone can help me out with this.
So my designer created a design but something like this :
http://prntscr.com/hpa44s
Does anyone have an idea how to create this in css3?
Thanks for helping!
Found a link that helped me solve it.
BODY{
background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}
#wrapper {
overflow: hidden;
height: 140px;
}
#test {
height: 101px; /* tweak for ipad */
background-color: #ccc;
position: relative;
}
#test::before {
z-index: -1;
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
border-bottom: 2px solid #000;
border-right: 2px solid #000;
box-shadow: -2px 4px 8px #000;
}
#test::after {
z-index: -1;
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
border-bottom: 2px solid #000;
border-left: 2px solid #000;
box-shadow: 2px 4px 8px #000;
}
http://jsfiddle.net/2hCrw/8/
I am trying to add some white dividers between blue and black. Please see the GIF animation below. Please edit my CSS in jsbin to mimic the same animation in the image. I only need CSS version of this animation without SVG or JS.
.spinner {
height:60px;
width:60px;
animation: rotation 10s infinite linear;
border-left:7px solid rgba(0,0,0,1);
border-right:7px solid rgba(0,0,0,1);
border-bottom:7px solid rgba(0,174,239,1);
border-top:7px solid rgba(0,174,239,1);
border-radius: 100%;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
http://jsbin.com/ziniwexuwi/edit?html,css,output
Please check the updated code. I hope it works well for you.
.spinner {
height:62px;
width:62px;
border-left:7px solid rgba(0,0,0,1);
border-right:7px solid rgba(0,0,0,1);
border-bottom:7px solid rgba(0,174,239,1);
border-top:7px solid rgba(0,174,239,1);
border-radius: 100%;
border-spacing: 1px;
position: relative;
animation: rotation 1s infinite linear;
}
.spinner span {
height: 7px;
width: 2px;
background: #fff;
position: absolute;
z-index: 1;
}
.spinner .a {
left: 6px;
top:3px;
transform: rotate(-47deg);
}
.spinner .b {
right: 6px;
top:3px;
transform: rotate(47deg);
}
.spinner .c {
left: 6px;
bottom: 3px;
transform: rotate(47deg);
}
.spinner .d {
right: 6px;
bottom: 3px;
transform: rotate(-47deg);
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
<div class="spinner">
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
<span class="d"></span>
</div>
Check this for your perfect requirement:
.loaderborder {
position: relative;
display: inline-block;
border: 16px solid #87ceeb;
border-radius: 50%;
border-top: 16px solid #000;
border-right: 16px solid #87ceeb;
border-bottom: 16px solid #000;
width: 100px;
height: 100px;
-webkit-animation: loaderborder 2.5s linear infinite;
animation: loaderborder 2.5s linear infinite;
}
.loaderborder:before{
content: '';
border-left: 16px solid #fff;
width: 0;
height: 9px;
border-radius: 0%;
display: inline-block;
transform: rotate(50deg);
}
.loaderborder:after{
content: '';
border-right: 16px solid #fff;
width: 0;
height: 9px;
border-radius: 0;
display: inline-block;
transform: rotate(-52deg);
position: absolute;
right: 0;
top: 5px;
}
.loaderborder span{
display: inline-block;
}
.loaderborder span:before{
content: '';
border-top: 16px solid #fff;
width: 10px;
height: 9px;
border-radius: 0%;
display: inline-block;
transform: rotate(50deg);
position: absolute;
z-index: 999;
top: 78px;
left: -2px;
}
.loaderborder span:after{
content: '';
border-bottom: 16px solid #fff;
width: 9px;
height: 9px;
border-radius: 0;
display: inline-block;
transform: rotate(-52deg);
position: absolute;
z-index: 9999;
top: 73px;
left: 85px;
}
#-webkit-keyframes loaderborder {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes loaderborder {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loaderborder"><span></span></div>
You can also check this Fiddle
I have created product box that shows product image, when hovered on flips around to show details of a product and this works well. Problem is when this product has ribbon on it and flips, text in the ribbon becomes flipped as well (it's position is correct), I need to somehow extra transform this text so it shows correctly TOP even when flipped. Is it possible?
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 5;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.product-box {
width: 292px;
height: 340px;
}
.thumb-wrapper {
height: 100%;
background-color: purple;
}
.product-box img {
width: 100%;
position: absolute;
display: block;
backface-visibility: hidden;
}
.product-box .thumb-detail {
width: 100%;
height: 100%;
position: absolute;
background: blue;
backface-visibility: hidden;
}
.product-box.flip {
perspective: 800px;
}
.product-box.flip .thumb-wrapper {
transition: transform 1s;
transform-style: preserve-3d;
}
.product-box.flip .thumb-detail, .product-box.flip:hover .thumb-wrapper {
transform: rotateY(-180deg);
}
<div class="product-box flip">
<div class="thumb-wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
<img src="#" alt="" title="" height="262" width="262">
<div class="thumb-detail">
</div>
</div>
</div>
Just duplicate the ribbon-wrapper-green and rotate it in the back
.card {
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 700;
margin: 0px auto;
}
.card:hover .front{
-webkit-transform: rotateY(-180deg);
}
.card:hover .back {
-webkit-transform: rotateY(0deg);
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.8s ease-out;
}
.front {
-webkit-transform: rotateY(0deg);
}
.back {
background: #9dcc78;
-webkit-transform: rotateY(180deg);
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 5;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.back .ribbon-wrapper-green {
top: -4px;
left: -1px;
-webkit-transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
}
<div class='card'>
<div class='front face'>
<div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
<img src='http://placehold.it/180x180'/>
</div>
<div class="back face">
<div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
<img src='http://placehold.it/180x180'/>
</div>
</div>
Note: I had initially misunderstood the question and posted a wrong answer. Did not want to delete it and hence have modified the original answer to still solve the problem albeit making it more complex in the process. The best approach is provided in Tambo's answer. You can use this method if you for some reason wish to achieve the effect without duplicating elements.
You can do it by adding the rotateY(-180deg) on the div with class="ribbon-wrapper-green" and positioning it on the other side. The original positioning is right: -3px and on hover, we change it to left: -3px or right: 210px; (box width 292px + offset 3px - width of ribbon container 85px).
After this, the whole ribbon is translated by the required pixels (the complex part) to get positioned on the left side of the screen. Now, even though the position is correct, the ribbon has to be rotated in the reverse direction to make it look properly like a ribbon and so a rotate(-90deg) is added (-90 degrees the element is originally rotated by 45 degree which has to be nullified to come back to a normal position and then we have to rotate another 45 degree in the reverse direction).
Note: The animation/transition effect is not great but I think you can work that out.
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 5;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-green:before,
.ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.product-box {
width: 292px;
height: 340px;
}
.thumb-wrapper {
height: 100%;
background-color: purple;
}
.product-box img {
width: 100%;
position: absolute;
display: block;
backface-visibility: hidden;
}
.product-box .thumb-detail {
width: 100%;
height: 100%;
position: absolute;
background: blue;
backface-visibility: hidden;
}
.product-box.flip {
perspective: 800px;
}
.product-box.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.product-box.flip .thumb-detail,
.product-box.flip:hover .thumb-wrapper {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.product-box.flip:hover .thumb-wrapper .ribbon-wrapper-green {
left: -3px;
-webkit-transform: rotateY(-180deg) translate(-212px) rotate(-90deg);
transform: rotateY(-180deg) translate(-212px) rotate(-90deg);
}
<div class="product-box flip">
<div class="thumb-wrapper">
<div class="ribbon-wrapper-green">
<div class="ribbon-green">TOP</div>
</div>
<img src="#" alt="" title="" height="262" width="262">
<div class="thumb-detail">
</div>
</div>
</div>
I have the following code that I took from http://cssdeck.com/labs/pure-css3-smooth-ribbon-with-borders
The HTML Code is:
<div id="ribbon">
<div class="inset"></div>
<div class="container">
<div class="base"></div>
<div class="left_corner"></div>
<div class="right_corner"></div>
</div>
The CSS Code is:
#ribbon {
width: 180px;
height: 280px;
margin: 0px;
position: relative;
overflow: hidden;
}
#ribbon .inset {
width: 200px;
height: 55px;
position: absolute;
top: -50px;
left: -10px;
z-index: 5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
#ribbon .container {
position: relative;
width: 100px;
height: 250px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #631a15;
border-right: 1px solid #631a15;
}
#ribbon .base {
height: 200px;
width: 100px;
background: rgb(199,59,60);
background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );
position: relative;
z-index: 2;
}
#ribbon .base:after {
content: '';
position: absolute;
top: 0;
width: 86px;
left: 6px;
height: 242px;
border-left: 1px dashed #631a15;
border-right: 1px dashed #631a15;
}
#ribbon .base:before {
content: '';
position: absolute;
top: 0;
width: 86px;
left: 7px;
height: 242px;
border-left: 1px dashed #da5050;
border-right: 1px dashed #da5050;
}
#ribbon .left_corner {
width: 100px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 20px;
left: -50px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#ribbon .right_corner {
width: 100px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 20px;
right: -50px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
I want to increase the width (to 250px) and decrease the height (to 140px) of the ribbon.
how can i do this?
i am still studying CSS.
I also want to insert an image on top of the ribbon that is formed by the above coding.
Please help!
Here you go bro :) Check the DEMO1
DEMO2
#ribbon .base {
height: 140px;
width: 250px;
}
Have changed the .left_arrow and .right_arrow values to make it fit. Check it on Fiddle and ask me if you want any clarifications.
Width 250px and height 140px is done..
See this fiddle
HTML
<div id="ribbon">
<div class="inset"></div>
<div class="container">
<div class="base"></div>
<div class="left_corner"></div>
<div class="right_corner"></div>
</div>
</div>
CSS
#ribbon {
width: 350px;
height: 280px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
#ribbon .container {
position: relative;
width: 250px;
height: 140px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #631a15;
border-right: 1px solid #631a15;
}
#ribbon .base {
height: 80px;
width: 250px;
background: rgb(99,59,60);
background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );
position: relative;
z-index: 2;
}
#ribbon .base:after {
content: '';
position: absolute;
top: 0;
width: 234px;
left: 6px;
height: 132px;
border-left: 1px dashed #631a15;
border-right: 1px dashed #631a15;
}
#ribbon .base:before {
content: '';
position: absolute;
top: 0;
width: 234px;
left: 7px;
height: 132px;
border-left: 1px dashed #da5050;
border-right: 1px dashed #da5050;
}
#ribbon .left_corner {
width: 150px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 15px;
left: -45px;
z-index: 1;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(145deg);
}
#ribbon .right_corner {
width: 150px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 15px;
right: -45px;
z-index: 1;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
#ribbon .inset {
width: 400px;
height: 55px;
position: absolute;
top: -50px;
left: -20px;
z-index: 5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
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?
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)
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
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;
}