Skip to content
Related Articles

Related Articles

How to create shapes using CSS ?
  • Difficulty Level : Basic
  • Last Updated : 27 Apr, 2021

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: 2200px/100px;
            background-color: green;
        }
    </style>
</head>
 
<body>
    <div class="oval"></div>
</body>
 
</html>
  • Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :