Home  »  Web Design   »   Magic of CSS border property

Magic of CSS border property

By Avinash

August 23, 2010Web Design4 Comments

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:

Up Side Triangle

.triangle_up { height:0px; width:0px; border-bottom:50px solid #006633; border-left:50px solid transparent; border-right:50px solid transparent; }
.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

Down side Triangle:

Bottom Side Triangle

.triangle_down { height:0px; width:0px; border-top:50px solid #006633; border-left:50px solid transparent; border-right:50px solid transparent; }
.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

Left side Triangle:

Left Side Triangle

.triangle_left { height:0px; width:0px; border-left:50px solid #006633; border-top:50px solid transparent; border-bottom:50px solid transparent; 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;
}

Right side Triangle:

Right Side Triangle

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

Cross Square:

CSS Cross Square

.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; }
.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;
}

Direction Arrow:

Direction Arraow

Below CSS should be used with given HTML code:

.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; }
.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;
}

HTML Code:

<div class="arrow">
  <div class="triangle_right"></div>
  <div class="arrowLine"></div>
</div>

<div class="arrow">
  <div class="arrowLine"></div>
  <div class="triangle_left"></div>
</div>

And finally Delicious Logo:

Delicious Logo

CSS Code:

.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; }
.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;
}

HTML Code:

<div class="delociousLogo">
  <div class="topleft"></div>
  <div class="topright"></div>
  <div class="bottomleft"></div>
  <div class="bottomright"></div>
</div>

For live demo check this link ” CSS Shapes Demo

Hope you like this. Waiting for your responses.

Share This Article

Related Posts

Tags:

Written by Avinash

Avinash Zala currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

  • evnisha

    wow !
    great i really like this.

  • Pogue

    Man, talk about a great post! I’ve stumbled across your blog a few times inside the past, but I usually forgot to save it. But not again! Thanks for writing the way you do, I truly enjoy seeing somebody who actually has an opinion and is not just regurgitating crap like most other writers today. Keep it up!

  • TrepUrbaksTek

    nice, very nice.

    • http://www.xpertdeveloper.com Avinash

      Thanks