CSS Shape Generator

December 1, 2020
3 Comments

CSS shape generator sometimes used for generating or forming totally different formed objects. CSS is capable of constructing all kinds of shapes. CSS form generator add a breadth and height and you have got the precise size parallelogram you would like. Add border-radius and you’ll spherical that shape.

  • Circle
  • Ellipse
  • Square
  • Rectangle
  • Polygon
  • Trapezoid
  • Parallelogram
  • Moon

Example:-

1. Circle

We will get circle form by assignment border radius property 50%.
Syntax:- 
class{
        height:300px;
        width:300px;
        border-radius:50%;
     }
 
Code:-
<!DOCTYPE html>
    <html>
    <head>
        <title>Example of circle shape</title>
        <style type="text/css">
            .circ{
                width:250px;
                height:250px;
                border-radius:50%;
                background: #0000ff;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <div class="circ"></div>
    </body>
    </html>
Output:-

2. Ellipse

We will get conic section form by assignment border-radius specifically 1/2 the breadth and height.

Syntax:- 

class{
        width:400px;
        height:200px;
        border-radius:200px/100px;
     }

Code:-

<!DOCTYPE html>
    <html>
    <head>
        <title>Example of Ellipse shape</title>
        <style type="text/css">
            .ellip{
                width:400px;
                height:200px;
                border-radius:200px/100px;
                background: #0000ff;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <div class="ellip"></div>
    </body>
    </html>

Output:-

3. Square

We will get sq. by assignment breadth and height ought to be same.

Syntax:- 

class{
        width:400px;
        height:400px;
        
     }
        

Code:- 

     <!DOCTYPE html>
    <html>
    <head>
        <title>Example of square shape</title>
        <style type="text/css">
            .sq{
                width:400px;
                height:400px;
                background: #ff0000;
            }
        </style>
    </head>
    <body>
        <h1>Gurukulzone SRCS</h1>
        <div class="sq"></div>
    </body>
    </html>
 

Output:-

4. Rectangle

We will get sq. by assignment breadth and height ought to diverge.

Syntax:- 

class{
        width:400px;
        height:200px;
        
     }





Code:- 





<!DOCTYPE html>





    <html>





    <head>





        <title>Example of Rectangle shape</title>





        <style type="text/css">





            .recta{





                width:400px;





                height:200px;





                background: #ff0000;





            }





        </style>





    </head>





    <body>





        <h1>Gurukulzone SRCS</h1>





        <div class="recta"></div>





    </body>





    </html>





 





Output:- 










5. Polygon 





The polygonal shape contains five sides. 





Syntax:- 





class{





        width: 54px;





        box-sizing: content-box; 





        border-width: 50px 18px 0;





        position: relative;





        border-color: greeen transparent;





    }





 





  class:before{





       top: -85px;





       left: -18px; 





       border-width: 0 45px 35px;





       content: "";





       position: absolute;





       border-color: transparent transparent green; 





    }





Code:- 





 <!DOCTYPE html>





    <html>





    <head>





        <title>Example of Polygon shape</title>





        <style type="text/css">





            .poly{





                border-style: solid;





                position: relative;





                width: 54px;





                box-sizing: content-box;





                border-width: 50px 18px 0;





                border-color: skyblue transparent;





                box-sizing: content-box;





                border-width: 50px 18px 0;





            }





            .poly:before{





                border-width: 0 45px 35px;





                border-style: solid;





                content: ""; 





                position : absolute; 





                height : 0; 





                width : 0; 





                top : -85px;





                left : -18px;





                border-color: transparent transparent 





                             skyblue;





                position: absolute;





                height: 0;





                width: 0;





                top: -85px;





                left: -18px;





            }





        </style>





    </head>





    <body>





        <h1>Gurukulzone SRCS</h1>





        <div class="poly"></div>





    </body>





    </html>





 





Output:- 










6. Trapezoid 





Trapezoid form is obtained by simply take away the highest half from Pentagon 





Syntax:- 





class{





        width: 54px;





        box-sizing: content-box; 





        border-width: 50px 18px 0;





        position: relative;





        border-color: pink transparent;





        





     }










Code:- 





<!DOCTYPE html>





    <html>





    <head>





        <title>Example of Trapezoid shape</title>





        <style type="text/css">





            .trap{





                border-style: solid;





                position: relative;





                width: 54px;





                box-sizing: content-box;





                border-width: 50px 18px 0;





                border-color: pink transparent;





                box-sizing: content-box;





                border-width: 50px 18px 0;





            }





        </style>





    </head>





    <body>





        <h1>Gurukulzone SRCS</h1>





        <div class="trap"></div>





    </body>





    </html>





                    





Output:- 










7.  Parallelogram





Parallelogram is obtained sort of a parallelogram however has tipped some angle on a vertical and horizontal plane. 





Syntax:- 





    class{





        width: 350px;





        height: 250px;





        transform: skew(30deg);





     }










Code:- 





<!DOCTYPE html>





    <html>





    <head>





        <title>Example of Parallelogram shape</title>





        <style type="text/css">





            .pall{





                width: 350px;





                height: 250px;





                transform: skew(30deg);





                background: lightgrey;





                margin-left:70px;





            }





        </style>





    </head>





    <body>





        <h1>Gurukulzone SRCS</h1>





        <div class="pall"></div>





    </body>





    </html>





 





Output:-










8. Moon





Syntax:- 










    class{





        border-radius: 50%;





        box-shadow: 15px 15px 0 0 pink;





     }





Code:-





    <!DOCTYPE html>





    <html>





    <head>





        <title>Example of Moon shape</title>





        <style type="text/css">





            .m{





                width: 150px;





                height: 150px;





                border-radius: 50%;





                box-shadow: 25px 25px 0 0 green;





            }





        </style>





    </head>





    <body>





        <h1>Gurukulzone SRCS</h1>





        <div class="m"></div>





    </body>





    </html>





Output:-