Open In App

How to create shapes using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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