Css3 Shapes with coding

In this post, we will be learn about how to make css3 shapes with codings. shapes are like as Square, rectangle, triangle, circle etc.

Square

 
.squre{

  width:300px;
  height:300px;
  background:orange;
 
} 

RECTANGLE

.rectangle{

  width:400px;
  height:230px;
  background:orange;

} 

CIRCLE

.circle{

  width:300px;
  height:300px;
  background:orange;
  border-radius:150px;
} 

TRIANGLE

.triangle{

  width:0px;
  height:0px;
  border-bottom:150px solid orange;
  border-right:150px solid transparent;
  border-left:150px solid transparent;
 
 } 

TRAPIZIUM

 
.trapizium{

  width:200px;
  height:0px;
  border-top:0px solid transparent;
  border-bottom:150px solid orange;
  border-left:40px solid transparent;
  border-right:40px solid transparent;
 
} 

KITE

.kite{
 
  width:300px;
  height:300px;
  background:orange;
  position:relative;
 -webkit-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 transform:rotate(45deg); 

} 

CONE

.cone{

  width:0px;
  height:0px;
  border-top:300px solid orange;
  border-right:150px solid transparent;
  border-left:150px solid transparent;
  border-radius:300px;
 
}