PUBLISHED ON: AUGUST 13, 2021
How to create different shapes with CSS?
Sometimes we need to add different shapes to the webpage. But there is not an element in HTML that can add the shapes to the webpage. To do so we need to use CSS.
In this article, we will learn to create different shapes with the help of CSS.
Creating different shapes
To create a shape, we can use CSS border property and use border-left , border-right, border-bottom , or bottom-top property to add borders. Also, use height and width property for the dimensions of the shape. We can draw any shape like triangle, square, rectangle, and so on.
Example: Creating different shapes with CSS
Here, we have created a triangle, rectangle and trapezoid with CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
border-bottom: 60px solid black;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 125px;
}
.rectangle {
height: 60px;
width: 100px;
background-color: black;
}
.triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 60px solid black;
}
</style>
</head>
<body>
<h2>Trapezoid </h2>
<div class="trapezoid "></div>
<h2> Rectangle </h2>
<div class="rectangle "></div>
<h2> Triangle</h2>
<div class="triangle"></div>
</body>
</html>
Output:
Here is the output of the above example.
Example: Creating circle and oval shape with CSS
To create circles and oval shapes use border-radius property. Here is an example to draw circles and oval shapes.
Conclusion
In this tutorial, we have learned to create different shapes with CSS. Here, we have drawn circle, oval, rectangle, trapezoid. We can draw any shape using border property.
