CSS Shape Generator

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:-