Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Draw various shapes using CSS

Posted by SAM at 10:06 pm on Saturday, 26 May 2012
Hello Friends,

Today I am going to tell you the greatness of CSS(Cascading Style Sheet).
Here I am discuss almost all shapes using CSS.

Here is the full code of all shapes.Just copy and paste this code in .html file.


<html>
<head>
<title>Shapes using css</title>
<style>
/*For  Square*/
.square{
width:100px;
height:100px;
background:#FF5FAA;
border-style:dotted;
float:left;
}
.tsquare{
margin-top:35px;
margin-left:25px;
position:absolute;
}
/*For  Rectangle*/
.rect{
width:300px;
height:100px;
margin-left:150px;
background:#FF5FAA;
border-style:dotted;
}
.trect{
margin-top:35px;
margin-left:105px;
position:absolute;

}
/*For  Circle*/
.cir{
width:100px;
height:100px;
background:#FF5FAA;
border-style:dotted;
border-radius:50px;
margin-top:10px;
float:left;
}
.tcir{
margin-top:35px;
margin-left:35px;
position:absolute;

}
/*For  Hollow Circle*/
.hcir{
display:block;
border:solid;
height:100px;
width:100px;
margin-left:150px;
margin-top:10px;
border-width:20px;
border-color:#FF5FAA;
border-radius:150px;
border-style:ridge;
}
.thcir{
margin-left:10px;
margin-top:35px;
position:absolute;
}
/*For Triangle*/
.tri{
display:block;
    height:0px;
    width: 00px;
    border-bottom: 75px solid #FF5FAA;
    border-left: 75px solid transparent;
border-right: 75px solid transparent;
margin-top:10px;
float:left
}
.ttri{
margin-top:35px;
position:absolute;
}

 .rtri{
display:block;
    height:0px;
    width: 00px;
margin-top:10px;
    border-top: 75px solid #FF5FAA;
    border-left: 75px solid transparent;
border-right: 75px solid transparent;
float:left
}

 .brtri{
display:block;
    height:0px;
    width: 00px;
    border-bottom: 75px solid #FF5FAA;
    border-left: 75px solid transparent;
margin-top:10px;
float:left
}
.ultri{
display:block;
    height:0px;
    width: 00px;
margin-top:10px;
    border-top: 75px solid #FF5FAA;
    border-right: 75px solid transparent;
margin-left:10px;
float:left
}
.bltri{
display:block;
    height:0px;
    width: 00px;
    border-bottom: 75px solid #FF5FAA;
    border-right: 75px solid transparent;
margin-left:10px;
margin-top:10px;
float:left
}
.urtri{
display:block;
    height:0px;
    width: 00px;
    margin-top:10px;
    border-top: 75px solid #FF5FAA;
    border-left: 75px solid transparent;
float:left
}
</style>
</head>
<body>
<div class="square"><span class="tsquare">Square</span></div>
<div class="rect"><span class="trect">Rectangle</span></div>
<div class="cir"><span class="tcir">Circle</span></div>
<div class="hcir"><span class="thcir">Hollow Circle</span></div>
<div class="tri"><span class="ttri">Tringle</span></div>
<div class="rtri"></div>
<div class="brtri"></div>
<div class="ultri"></div>
<div class="bltri"></div>
<div class="urtri"></div>
</body>
</html>

So After run this file in browser u will see the magic of CSS.
Here is the result:

Note:Circle shape is not working in IE(Internet Explorer).
I hope you enjoyed this............

If you like it then comment or share it..........
Labels: 1 comments
Subscribe to: Comments (Atom)