Using CSS Create Shapes

Create a Circle using CSS :

HTML for circle
We create a circle using CSS, firstly, we create a div in HTML and define a class or id name of the shape. for example, we define an ID and id name is a circle.

<div id="circle"></div>

CSS
For the circle CSS, simply define a height and width of the div and then apply a border radius half of the height and the width to make a circle.

#circle {
    width: 200px;
    height: 200px;
    background: #7fee1d;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}

Create a Square using CSS:

HTML for Square
We create a square shape in CSS, square shape just like the circle shape, same as we create a div in HTML and define a class or id name of the shape. Here we define an ID and id name is a square.

<div id="square"></div>

CSS
For the square CSS, simply define the div height and width of equal value and we provide a value for making it looks visible.

#square {
    width: 200px;
    height: 200px;
    background: #f447ff;
}

Create a Rectangle using CSS:

HTML for Rectangle
We create a rectangular shape in CSS, rectangular shape just like the square shape, define an ID name rectangle in the div.

<div id="rectangle"></div>

CSS
Rectangular shape CSS ,this time we will define a height(120px) but samller then simple width(220px).

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

Create an Oval using CSS:

HTML for Oval shape
We create an oval using CSS, with the ID name oval we create a div.

<div id="oval"></div>

CSS
The oval shape is almost same with circle; however, for the oval shape, we will apply a border radius that is half of the height.

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Create a Triangle using CSS:

HTML for Triangle shape
With the ID name triangle, we set up again a div to create a triangle in CSS.

<div id="triangle"></div>

CSS
To create a triangle in CSS, we manipulate the border property and also Manipulating the border width will give different results at rotational angles.

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Create a Diamond using CSS :

HTML for Diamond shape
Diamond shape using CSS, provide the ID name diamond to the div.

<div id="diamond"></div>

CSS
Using the transform property we rotate the value of a triangle and create a diamond shape.

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
/* 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%;
    margin: 60px 0 10px 310px;
}

Create a Trapezium using CSS :

HTML for Trapezium shape
To create a trapezium shape using CSS, we set up again a div to create a trapezium in CSS With the ID name trapezium.

<div id="trapezium"></div>

CSS
To display a trapezium set up equal right and left border with a flat bottom.

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}