EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial CSS Shape Generator

CSS Shape Generator

By Priya PedamkarPriya Pedamkar

CSS Shape Generator

Overview of CSS Shape Generator

CSS Shape generator usually used for generating or forming different shaped objects. Generally, we will investigate below shapes in this “Shape Generator” concept

  1. Circle
  2. Ellipse
  3. Square
  4. Rectangle
  5. Polygon
  6. Trapezoid
  7. Parallelogram
  8. Moon

Usually, these shaped objects are using in beautifying the view of images. For example, in whats app initially square shape around the profile picture, now it is round or circles shape. The future may be oval or some other shape.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

How does Shape Generator work in CSS?

Circle, Ellipse, Square, Rectangle and Polygon shapes, we can use the clip-path property. Based on this clip-path property these will work. But clip-path property cannot work on HTML elements but can work on Scalable Vector Graphics. So, we will use normal CSS properties to achieve all 8 shapes.

Rest of shapes like Trapezoid, Parallelogram, and Moon shapes, we will be changing border-radius, box-shadow and transform properties as per required shape. Anyway, we will use normal CSS properties to get all the shapes.

To make functioning these shapes, we must work on the below properties parallelly.

  • Height and width
  • Padding
  • Rotation
  • Skew
  • Positioning
  • Colors
  • Border

We will deal with this above 8 shapes in the below 8 examples.

Examples of CSS Shape Generator with Code

The examples of CSS shape generator are given below:

1. Circle

We will get circle shape by assigning border-radius:50%.

Syntax:

.class
{
width: 200px;
height: 200px;
border-radius: 50%
}

HTML Code: Circle.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Circle.css">
<title>Circle</title>
</head>
<body>
<h1>Circle Shape</h1>
<div class="circle"></div>
</body>
</html>

CSS Code: Circle.css

h1{
font-family: sans-serif;;
color: green;
}
.circle{
width: 200px;
height: 200px;
background: Brown;
border-radius: 50%
}

Output:

CSS shape generator

2. Ellipse

We will get ellipse shape by assigning border-radius exactly half of the width and height respectively, for example width=400px, height=200px then border-radius:200px/100px.

Syntax:

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

HTML Code: Eclipse.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Ellipse.css">
<title>Circle</title>
</head>
<body>
<h1>Ellipse Shape</h1>
<div class="ellipse"></div>
</body>
</html>

CSS Code: Ellipse.css

.ellipse {
width: 400px;
height: 200px;
background: blue;
border-radius: 200px/100px;
}
h1 {
font-family: sans-serif;;
color: green;
}

Output:

 CSS shape generator

3. Square

We will get square by assigning width and height should be same, like width=100px, height=100px.

Syntax:

.class
{
width:100px;
height:100px;
}

HTML Code: Square.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Square.css">
<title>Square</title>
</head>
<body>
<h1>Square Shape</h1>
<div class="square"></div>
</body>
</html>

CSS Code: Square.css

.square {
width: 300px;
height: 300px;
background: gray;
}
h1 {
font-family: sans-serif;;
color: green;
}

Output:

CSS shape generator

4. Rectangle

We will get square by assigning width and height should be different, like width=200px, height=100px or width=100px, height=200px vice-versa.

Syntax:

.class
{
width:200px;
height:100px;
}

HTML Code: Rectangle.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Rectangle.css">
<title>Rectangle</title>
</head>
<body>
<h1>Rectangle Shape</h1>
<div class="rectangle"></div>
</body>
</html>

CSS Code: Rectangle.css

.rectangle {
width: 200px;
height: 100px;
background: olive;
}
h1 {
font-family: sans-serif;;
color: green;
}

Output:

CSS shape generator

5. Polygon

Sides 5 more is said to be Polygon. Example Pentagon

Pentagon: We will get Pentagon by assigning values as like below

In class property:

width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;

In before class property:

top: -85px;
left: -18px;
border-width: 0 45px 35px;

Syntax:

.class{
width: 54px;
box-sizing: content-box; //default box sizing behavior in CSS
border-width: 50px 18px 0;
position: relative;//position is relative to normal position
border-color: silver transparent;
}
.class:before
{
top: -85px;//this negative margin values pulls element in top direction
left: -18px; //this negative margin values pulls element in left direction
border-width: 0 45px 35px;
content: "";
position: absolute;
border-color: transparent transparent silver;
}

HTML Code: Pentgon.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Pentagon.css">
<title>Pentagon</title>
</head>
<body>
<h1>Pentagon Shape</h1>
<div class="pentagon"></div>
</body>
</html>

CSS Code: Pentagon.css

.pentagon {
border-style: solid;
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-color: orange transparent;
box-sizing: content-box;
border-width: 50px 18px 0;
}
.pentagon:before {
border-width: 0 45px 35px;
border-style: solid;
content: ""; position : absolute; height : 0; width : 0; top : -85px;
left : -18px;
border-color: transparent transparent orange;
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
}
h1 {
font-family: sans-serif;;
color: green;
padding: 10px;
}

Output:

CSS shape generator

6. Trapezoid

Just remove the top part from Pentagon (means class before CSS code no need), we will get

Syntax:

.class{
width: 54px;
box-sizing: content-box; //default box sizing behavior in CSS
border-width: 50px 18px 0;
position: relative;//position is relative to normal position
border-color: silver transparent;
}

HTML Code: Trapezoid.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Trapezoid.css">
<title>Trapezoid</title>
</head>
<body>
<h1>Trapezoid Shape</h1>
<div class="trapezoid"></div>
</body>
</html>

CSS Code: Trapezoid.css

.trapezoid {
border-style: solid;
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-color: orange transparent;
box-sizing: content-box;
border-width: 50px 18px 0;
}
h1 {
font-family: sans-serif;;
color: green;
padding: 10px;
}

Output:

Trapezoid shape

7. Parallelogram

It just like a rectangle but has tilted some angle on a vertical and horizontal plane. We will get it by assigning like width: 250px, height: 150px, transform: skew(30deg). Skew will give you a 2D angle in CSS.

Syntax:

.class{
width: 250px,
height: 150px,
transform: skew(30deg)
}

HTML Code: Parallelogram.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Parallelogram.css">
<title>Parallelogram</title>
</head>
<body>
<h1>Parallelogram Shape</h1>
<div class="parlgrm"></div>
</body>
</html>

CSS Code: Parallelogram.css

.parlgrm {
width: 250px;
height: 150px;
transform: skew(30deg);
background: lime;
margin:40px;
}
h1 {
font-family: sans-serif;;
color: green;
}

Output:

Parallelogram

8. Moon

If we observe carefully, we will get it from circle only by covering 80 of the portion with shadow. Here we will do the same thing covering the circle with some shadow. Get it by assigning box-shadow: 15px 15px 0 0 red to the circle.

Syntax:

.class{
border-radius: 50%;
box-shadow: 15px 15px 0 0 red; //it will cover the top portion of the circle
}

HTML Code: Moon.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"  type="text/css" href="Moon.css">
<title>Moon</title>
</head>
<body>
<h1>Moon Shape</h1>
<div class="moon"></div>
</body>
</html>

CSS Code: Moon.css

h1 {
font-family: sans-serif;;
color: green;
}
.moon {
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 25px 25px 0 0 fuchsia;
}

Output:

 Moon Shape

Conclusion

We will get all shapes without using the clip-path property by just changing the properties of height, width, transform, border-radius, position, box-sizing, etc.

Recommended Articles

This is a guide to CSS Shape Generator. Here we discuss the introduction, how does shape generator work in CSS with examples and codes. You may also look at the following articles to learn more-

  1. CSS Pagination
  2. CSS Text Formatting
  3. CSS Box Sizing
  4. CSS Text Underline
0 Shares
Share
Tweet
Share
quiz