How to Create Shapes using CSS ?

Last Updated : 02 Apr, 2024

CSS shapes refer to the geometric shapes that can be created and styled using CSS properties. CSS is a powerful tool that allows web developers to create a variety of shapes using simple CSS properties. From simple squares and circles to complex polygons, CSS provides the tools necessary to design visually appealing elements that can enhance user interaction and overall experience. This article will guide you through the process of creating different shapes using CSS.

Try It:

Rectangle

Circle

Triangle

Trapezoid

Parallelogram

Oval

Examples of Creating Shapes Using CSS

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

<!-- Write HTML code here -->
<!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

<!-- Write HTML code here -->
<!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>