sjcjiieiwi

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;
 
}

Top Tutorials

Html Start Menu

Css Start Menu

Javascript Start Menu

Jquery Start Menu

Our Best Examples

Css3 Shapes

Html5 Calculators

Css, Html Animations

More Best posts......