The other day I saw some post about cubes in HTML/CSS using 3 different elements inside a container element. I then got to thinking: what if I did that with just a single element and all CSS? I then started messing around and eventually came out with the following. Fair warning: it only works properly in Firefox 4.0+
If you are looking at this in Google, Safari, or (heaven-forbid) Internet Explorer; then you should hop over to Firefox and then look at it, I guarantee it will look cooler.
I had a lot of difficulty getting a fluid height/width for the main element and having that same height/width for the bordering sides. With the transforming, the the sides kept on coming out longer. The only way I could figure out to get the dimensions fluid was to use the CSS calc() to calculate the width/height of the sides. I ended up with this formula .71*100% + .554px. Technically my calculator came up with several more decimal places, but this works just as well.
The cubes above are fixed width, yet fluid height. They can easily be adjusted to fluid width as well, I just didn’t want a super wide cube.
Here is the basic CSS, it uses one element and the :before and :after pseudo elements. The HTML is as simple as adding the class cube to an element such as a div or p.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .cube { display: inline-block; width: 250px; background: hsl(120,100%, 50%); position: relative; margin: 30px 0 0 30px; padding: 15px; border: 1px hsl(120, 100%, 50%) solid; } .cube:before { content: ' '; background: hsl(120,100%, 25%); top: -36px; left: -36px; height: -moz-calc(.71*100% + .554px); width: 50px; -moz-transform: rotate(45deg) skew(45deg, 0deg); position: absolute; -moz-transform-origin: top left; display: inline-block; } .cube:after { content: ' '; background: hsl(120,100%, 75%); top: -36px; left: -36px; height: 50px; width: -moz-calc(.71*100% + .554px); -moz-transform: rotate(-45deg) skew(0deg, 45deg); position: absolute; -moz-transform-origin: top left; } |
You can change the sizes as you please, however, if you change the sizes of the siding you will have to change the positioning as well.
Here it in Chrome:
HTML:
Here is a big cube, it is green. The cool thing about it is it uses CSS3 calc(), the bad thing is only Firefox supports it
If you are looking at this in Google, Safari, or (heaven-forbid) Internet Explorer; then you should hop over to Firefox and then look at it, I guarantee it will look cooler.
This cube is in front! but, it sits inside the big cube div.
CSS:
.cube:before {
content: ‘ ‘;
background: hsl(120,100%, 25%);
top: -36px;
left: -36px;
height: -moz-calc(.71*100% + .554px);
width: 50px;
position: absolute;
display: inline-block;
-webkit-transform: rotate(45deg) skew(45deg, 0deg);
-webkit-transform-origin: top left;
height: calc(.71*100% + .554px);
}
.cube:after {
content: ‘ ‘;
background: hsl(120,100%, 75%);
top: -36px;
left: -36px;
height: 50px;
position: absolute;
width: calc(.71*100% + .554px);
-webkit-transform: rotate(-45deg) skew(0deg, 45deg);
-webkit-transform-origin: top left;
}