Next G Blog: Draw various shapes using CSS

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: