How to Create Shapes using CSS ?
Last Updated :
18 Sep, 2024
CSS shapes allow web developers to create a wide variety of geometric figures using simple CSS properties. These shapes can range from basic squares and circles to more intricate polygons like stars and hexagons.
This guide will walk you through how to create different shapes using CSS, providing practical examples and tips to help you achieve stunning designs on your websites.
Introduction to CSS Shapes
With CSS, you can create and style shapes effortlessly. These shapes can be used in website layouts, buttons, animations, and backgrounds. CSS provides powerful tools such as the border-radius property, clip-path, and transform to manipulate elements into desired shapes. By mastering these properties, you can improve user interaction and overall experience.
Let’s explore some of the basic and advanced shapes you can create using CSS.
Basic CSS Shapes: Examples and Code
1. Creating a square:
The square is one of the simplest shapes to create with CSS. Here’s an example of how to create a square:
html
<!DOCTYPE html>
<html>
<head>
<style>
.square {
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Output:
2. Creating Triangle:
Triangles can also be created with CSS. Here’s an example of how to create an upward triangle:
html
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
Output:
3. Creating a Rectangle:
A rectangle is simply a div with unequal height and width. Here's an example of how to create a rectangle
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
height: 100px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
Output:
output
4. Creating a Circle:
A circle is essentially a square with border-radius: 50%;. Here's how you can create a circle
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
height: 100px;
width: 100px;
background-color: green;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
Output:
OutputAdvanced CSS Shapes: Examples and Code
Here are some important CSS shapes along with their CSS code, which you can simply copy and paste into your CSS section to create them.
5. Oval
CSS
.oval {
width: 200px;
height: 100px;
background-color: green;
border-radius: 50%;
}
Output:
output6. Diamond
CSS
.diamond {
width: 100px;
height: 100px;
background-color: green;
transform: rotate(45deg);
}
Output :
output
7. Pentagon
CSS
.pentagon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 0;
width: 180px;
border-top: 180px solid green;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
}
.pentagon:after {
position: absolute;
content: '';
border-bottom: 180px solid green;
border-left: 180px solid transparent;
border-right: 180px solid transparent;
bottom: 180px;
left: -90px;
}
Output:
output
8. Hexagon
CSS
.hexagon {
width: 100px;
height: 55px;
background-color: green;
position: relative;
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid green;
}
.hexagon:after {
top: 100%;
border-top: 27.5px solid green;
}
Output:
output
9. Trapezoid
CSS
.trapezoid {
border-bottom: 100px solid green;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 150px;
}
Output :
output10. Parallelogram
CSS
.parallelogram {
width: 200px;
height: 100px;
background-color: green;
transform: skew(20deg);
}
Output :
output11. Star
CSS
.star {
--star-color: green;
margin: 1em auto;
font-size: 10em;
position: relative;
display: block;
width: 0px;
height: 0px;
border-right: 1em solid transparent;
border-bottom: 0.7em solid var(--star-color);
border-left: 1em solid transparent;
transform: rotate(35deg);
}
.star:before {
border-bottom: 0.8em solid var(--star-color);
border-left: 0.3em solid transparent;
border-right: 0.3em solid transparent;
position: absolute;
height: 0;
width: 0;
top: -0.45em;
left: -0.65em;
display: block;
content: "";
transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
top: 0.03em;
left: -1.05em;
width: 0;
height: 0;
border-right: 1em solid transparent;
border-bottom: 0.7em solid var(--star-color);
border-left: 1em solid transparent;
transform: rotate(-70deg);
content: "";
}
Output :
output
12. Heart
CSS
.heart {
background-color: green;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: green;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
Output:
output
13. Arrow
CSS
.arrow {
width: 150px;
height: 30px;
background-color: green;
position: relative;
display: inline-block;
}
.arrow:after {
content: "";
position: absolute;
top: 0;
right: -30px;
width: 0;
height: 0;
border-left: 30px solid green;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
Output :
Output14. Crescent
CSS
.Crescent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
box-shadow: -15px 15px 0 5px green ;
border-radius: 50%;
}
Output :
output
Similar Reads
How to create shape using CSS clipping ? You can easily create shapes using the clip-path property in CSS. Actually clip-path property lets you clip an element to a basic shape. The basic shape like circle, ellipse, the polygon can be achieved using the <basic-shape> property value of clip-path which will be discussed further in this
3 min read
How to Create Custom Shape Button using SVG ? To design the shape of an HTML button we can use SVG elements (Scalable Vector Graphics). It basically defines the vector-based graphics in XML format. Every element and every attribute in SVG files can be animated. We can use SVG to create 2-D graphics of any custom shape. Example 1: This example c
2 min read
How to create a Menu Icon using CSS ? The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c
3 min read
How to create and style border using CSS ? The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val
4 min read
How to Add Stroke using CSS ? Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges.Several methods can be used to add strokes usin
2 min read
How to Create Avatar Images using HTML and CSS ? This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu
1 min read