In this blog I will show you how to make different shapes in HTML with the help of CSS3.
Here I use different class for different shape.
Ex. for circle i took "circle" class.
CODE
<html>
<head>
<title>design</title>
<style>
.rectangle
{
width:200px;
height:100px;
background-color:#0C9;
text-align:center;
font-size:30px;
color:#90F;
}
.rounded
{
margin-top:10px;
width:200px;
height:100px;
border-radius:30px;
background-color:#0C9;
text-align:center;
font-size:28px;
color:#90F;
}
.bottom
{
margin-top:10px;
width:200px;
height:100px;
border-bottom-left-radius:50px;
border-top-right-radius:50px;
background-color:#0C9;
text-align:center;
font-size:30px;
color:#90F;
}
.circle
{
margin-top:10px;
width:150px;
height:150px;
border-radius:100px;
background-color:#0C9;
text-align:center;
font-size:30px;
color:#90F;
}
.triangle
{
margin-top:10px;
width:0;
height:0;
border-bottom:120px solid #00CC99;
border-left:60px solid transparent;
border-right:60px solid transparent;
text-align:center;
font-size:30px;
color:#90F;
}
.diamond
{
margin-top:30px;
width:150px;
height:150px;
background-color:#0C9;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
text-align:center;
font-size:30px;
color:#90F;
}
.parallelogram
{
margin-top:30px;
width:150px;
height:100px;
background-color:#0C9;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
transform:skew(20deg);
text-align:center;
font-size:30px;
color:#90F;
}
</style>
</head>
<body>
<div class="rectangle">Rectangle</div>
<div class="rounded">Rounded rectangle</div>
<div class="bottom">bottom left & top right</div>
<div class="circle">circle</div>
<div class="triangle">triangle</div>
<div class="diamond">diamond</div>
<div class="parallelogram">parallelogram</div>
</body>
</html>