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
- Circle
- Ellipse
- Square
- Rectangle
- Polygon
- Trapezoid
- Parallelogram
- 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.
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.
4.5 (2,550 ratings)
View Course
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:
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:
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:
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:
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:
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:
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:
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:
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-
