If you too are into the power of Cascading Style Sheets (CSS) as much as I am, then you will really appreciate this little gem I happened to discover. At least, if you are as much of a die-hard Internet design geek as I am.

Have a good close look at the following so-called images:

So what do you think, I mean are you impressed? If you thought they are really images, then you were wrong. Sorry about that, but the figures above were purely generated not using embedded images but good old plain-vanilla CSS instead. Hard to believe but true.

Impressed? Well you shouldn't be, because they were merely built using slants. Here is how you can also use slants to make your web site even more amazing..

Place the following style declaration somewhere in the header section:

<style type="text/css">
.s1 {
  border-color:yellow green blue red;
  line-height:0px;
  width:0px;
  height:0px;
  border-style:solid;
}
</style>

And then, place the following code where you want the figures to appear:

<div class="s1" style="margin:10px;float:left;border-width:25px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:19px 25px 31px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:12px 25px 38px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:6px 25px 43px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:0px 25px 50px;"></div>

(Find out more about slants.)

It is even possible to create a heart made of CSS by using slant technology.

Here's to the power of CSS and the infinite possibilities.