Some Css tricks for square and triangle..

Hello...
Style sheets are the way that standards-compliant Web designers define the layout, look-and-feel, and design of their pages.  and trough the css webpages looks great.
Some times we have to use images instead of the css. because we are aware of some tricks of the css. 
here i share some tricks. 

1) Triangles in the Square.

in above image. i have use the css to create square using 4 triangle.
CODE:

<style>

.triangle{

border-left: 200px solid red;

border-top: 200px solid yellow;

border-bottom:200px solid green;

border-right: 200px solid blue;

display: inline-block;

}

</style>

<span class="triangle"></span>

Just giving then width and height we can change the shape.

2) Create top, bottom, left, right images using css.

in above image you can see the arrows in all the directions.


CODE:

<style>

.top-triangle{
border-left: 100px solid transparent;
border-top: 100px solid yellow;
border-bottom:100px solid transparent;
border-right: 100px solid transparent;
display: inline-block;
}
.bottom-triangle{
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom:100px solid green;
border-right: 100px solid transparent;
display: inline-block;
}
.left-triangle{
border-left: 100px solid red;
border-top: 100px solid transparent;
border-bottom:100px solid transparent;
border-right: 100px solid transparent;
display: inline-block;
}
.right-triangle{
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom:100px solid transparent;
border-right: 100px solid blue;
display: inline-block;
}
</style>
<span class="top-triangle"></span>
<span class="bottom-triangle"></span>
<span class="left-triangle"></span>
<span class="right-triangle"></span>

3) Square using 2 triangle, rectangle using 2 Trianlge, and more..

CODE:

<style>
.top-triangle{
border-top: 100px solid yellow;
border-right: 100px solid green;
display: inline-block;
}
.bottom-triangle{
border-left: 100px solid red;
border-top: 100px solid yellow;
display: inline-block;
}
.left-triangle{
border-top: 200px solid yellow;
border-right: 100px solid blue;
display: inline-block;
}
.right-triangle{

border-bottom:100px solid green;
border-right: 200px solid blue;
display: inline-block;
}
.left-right-triangle{
border-left: 100px solid red;
border-right: 100px solid red;

border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
display: inline-block;
}
.top-bottom-triangle{
border-left: 100px solid transparent;
border-right: 100px solid transparent;

border-top: 100px solid green;
border-bottom: 100px solid green;
display: inline-block;
}
</style>
<span class="top-triangle"></span>
<span class="bottom-triangle"></span>
<span class="left-triangle"></span>
<span class="right-triangle"></span>

<span class="left-right-triangle"></span>
<span class="top-bottom-triangle"></span>


I hope it helps you and comment if you like... :)