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.
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+.
margin: 100px 0 0 0;
border-width: 500px 180px 0;
border-color: #FFD300 #1770cf;
border-width: 0 430px 300px;
border-color: transparent #1770cf #FFD300;