Design of Shapes Using CSS

Octal Enterprises

1) circle 

   

            Code : #circle 

                  

                { 

                      width: 140px;

                      height: 140px;

                      background: red; 

                     -moz-border-radius: 70px; 

                     -webkit-border-radius: 70px; 

                     border-radius: 70px;

                }

2) square

             Code : #square

                {

                       width: 140px; 

                       height: 140px; 

                       background: blue; 

                } 

3) Diamond

              Code : #diamond

               {

                  

                     width: 80px; 

                     height: 80px; 

                     background: purple;

                     margin: 3px 0 0 30px;

   

    /* Rotate */

         -webkit-transform: rotate(-45deg);

         -moz-transform: rotate(-45deg);

         -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

         transform: rotate(-45deg);

   

/* Rotate Origin */

         -webkit-transform-origin: 0 100%;

         -moz-transform-origin: 0 100%;

         -ms-transform-origin: 0 100%;

         -o-transform-origin: 0 100%;

         transform-origin: 0 100%;

                  

                  } 

Keep Connected With Octal Enterprises And learn programming . . .