GizmoRay

3D Illusion with CSS tricks

Dec 30th, 2012

Prepare for incoming nerdiness – you have been warned.

CSS is widely overlooked in terms of its power for certain applications, the number of websites the don’t utilize its amazing properties is flabbergasting. Ranging from box-shadows to border-radiuses, designers will often use other complicated workarounds, where the latest iteration of CSS would easily have solved the issues.

The above photograph is a perfect example of where CSS could handle the situation with ease, but where most will use images or complicated HTML5 and Javascript properties to draw the image. However, the aforementioned example was accomplished with pure CSS, not a drop of JS or HTML5 to be seen for miles. One can very easily draw a shape with transparent border styles and various margins, adding the three dimensionality takes slightly more thought, though. As for the example, I created a pentagon with two separate shapes, an askew rectangle and a triangle. To add the third dimension, I simply used the outset border-style property, however, this effect could also be achieved via different coloring of the top section. Check out the full code below, good luck in your designing!

Bugs:

There are a number of issues that I’ve noticed in using this method, such as artifacting with the transparent border-colors, as well as the edges of the shape. Also, the colors within the transparent border-colors will look slightly different in Firefox and IE 5+.

#pentagon {
margin: 100px 0 0 0;
margin-left: auto;
margin-right: auto;
position: relative;
width: 500px;
border-width: 500px 180px 0;
border-style: outset;
border-color: #FFD300 #1770cf;
}
#pentagon:before {
content: “”;
position: absolute;
height: 0;
width: 0;
top: -800px;
left: -180px;
border-width: 0 430px 300px;
border-style: outset;
border-color: transparent #1770cf #FFD300;
}