Magic of CSS border property

CSS have great command over its border property. We are still using images for things like triangle and some other shapes. But from now it’s not needed. We can developer same shapes with CSS also. Here are some tricks to replace the images with css. Lets do it now.

For live demo check this link : CSS Shapes Demo

Up side Triangle:

[cc lang=”css”]
.triangle_up
{
height:0px; width:0px;
border-bottom:50px solid #006633;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
[/cc]

Down side Triangle:

[cc lang=”css”]
.triangle_down
{
height:0px; width:0px;
border-top:50px solid #006633;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
[/cc]

Left side Triangle:

[cc lang=”css”]
.triangle_left
{
height:0px; width:0px;
border-left:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
float:left;
}
[/cc]

Right side Triangle:

[cc lang=”css”]
.triangle_right
{
height:0px; width:0px; float:left;
border-right:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}
[/cc]

Cross Square:

[cc lang=”css”]
.crossSquare
{
height:0px; width:0px;
border-right:50px solid blue;
border-top:50px solid gray;
border-bottom:50px solid red;
border-left:50px solid yellow;
}
[/cc]

Direction Arrow:

Below CSS should be used with given HTML code:

[cc lang=”css”]
.arrowLine
{
background-color:#006633;
border-bottom:0 solid transparent;
border-top:0 solid transparent;
height:100px;
width:50px;
float:left;
}

.triangle_left
{
height:0px; width:0px;
border-left:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
float:left;
}

.triangle_right
{
height:0px; width:0px; float:left;
border-right:50px solid #006633;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}
[/cc]

HTML Code:

[cc lang=”html”]

[/cc]

And finally Delicious Logo:

CSS Code:

[cc lang=”css”]
.delociousLogo
{
height:100px; width:100px;
}

.topleft
{
height:0px; width:0px;
border-top:50px solid #FFFFFF;
border-right:0px solid #FFFFFF;
border-bottom:0px solid #FFFFFF;
border-left:50px solid #FFFFFF;
float:left;
}

.topright
{
float:left;
height:0px; width:0px;
border-top:50px solid #0000CC;
border-right:0px solid #0000CC;
border-bottom:0px solid #0000CC;
border-left:50px solid #0000CC;
}

.bottomleft
{
float:left;
height:0px; width:0px;
border-top:50px solid #000000;
border-right:0px solid #000000;
border-bottom:0px solid #000000;
border-left:50px solid #000000;
}

.bottomright
{
float:left;
height:0px; width:0px;
border-top:50px solid #999999;
border-right:0px solid #999999;
border-bottom:0px solid #999999;
border-left:50px solid #999999;
}
[/cc]

HTML Code:

[cc lang=”html”]

[/cc]

For live demo check this link ” CSS Shapes Demo

Hope you like this. Waiting for your responses.