Open In App

How to create shapes using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will design some different types of shapes using CSS. CSS is capable of making all types of shapes. 
 

  • Creating 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: 
 

  • Creating Triangle 
    • Upward: 
       

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>


Output: 
 

  • Downward: 
     

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-top: 50px solid green;
        }
    </style>
</head>
 
<body>
    <div class="triangle"></div>
</body>
 
</html>


Output: 
 

  • Creating a circle: 
     

html




<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
 
<head>
    <style>
        .circle {
            height: 70px;
            width: 70px;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>
 
<body>
    <div class="circle"></div>
</body>
 
</html>


Output: 
 

  • Creating a rectangle: 
     

html




<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
 
<head>
    <style>
        .rectangle {
            height: 50px;
            width: 80px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <div class="rectangle"></div>
</body>
 
</html>


Output: 

 

  • Creating a parallelogram: 
     

html




<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
 
<head>
    <style>
        .parallelogram {
            width: 120px;
            height: 60px;
            transform: skew(24deg);
            background: green;
        }
    </style>
</head>
 
<body>
    <div class="parallelogram"></div>
</body>
 
</html>


  • Output: 
     

  • Creating oval:

HTML




<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
 
<head>
    <style>
        .oval {
            height: 200px;
            width: 400px;
          border-radius: 50%;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <div class="oval"></div>
</body>
 
</html>


  • Output:



Last Updated : 21 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads