The CSS Shapes

 The CSS Shapes

In this tutorial, we are going to create CSS shapes like squares, triangles, circles, rectangles.

let's see the below example first we create square shapes.

1. Square

HTML

    <div class="square"></div>

CSS

        .square {

            width: 200px;

            height: 200px;

            background: blueviolet;

            margin: auto;

            margin-top: 150px;

        }

        

Live Example

2. Circle

let's see the below example of a circle shape.

HTML

    <div class="circle"></div>

CSS

        .circle {

            width: 200px;

            height: 200px;

            background: rebeccapurple;

            margin: auto;

            border-radius: 50%;

            margin-top: 150px;

        }

        

Live Example

3. Triangle

HTML

    <div class="triangle"></div>

CSS

        .triangle{

            width: 0;

            height: 0;

            margin: auto;

            margin-top: 150px;

            border-left: 50px solid transparent;

            border-right: 50px solid transparent;

            border-bottom: 100px solid rgb(243, 243, 26);

        }

        

Live Example

4. Rectangle

HTML

    <div class="rectangle"></div>

CSS

        .rectangle{

            width: 200px;

            height: 100px;

            margin: auto;

            margin-top: 150px;

            background: rgb(128, 219, 23);

        }

        

Live Example

Thanks for reading .... 👏👏👏