How to Create Triangle in CSS ?

Last Updated : 10 Jun, 2022

In this article, we are going to learn how to use CSS properties to create a triangular shape. Normally there is no direct technique to create a triangle using CSS.

Approach: To create the triangle, in the HTML part we have to just add a single div for each triangle. The concept is to create a box with no width or height. The width of the border determines the Triangle’s actual width and height. The bottom border of an up-arrowed triangle, for example, is colored, while the left and right borders are transparent, forming a triangle. To make bottom-arrowed, left-arrowed, and right-arrowed triangles, we have to keep the top border, right border, and left border colored respectively.

Used Property (main-role):

border-top: This CSS property is used to add a border on the top of an element, it takes the value of the border width and the color of the border.
border-left: This CSS property is used to add a border on the left side of an element, it takes the value of the border width and the color of the border.
border-right: This CSS property is used to add a border on the right side of an element, it takes the value of the border width and the color of the border.
border-bottom: This CSS property is used to add a border to the bottom of an element, it takes the value of the border width and the color of the border.

The below example demonstrates the above approach.

Example 1: In the below code border-bottom property is used to make an up-arrowed triangle.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <style> 
        h1{ 
            color: green; 
            margin: 2rem; 
        } 
        h3{ 
            margin: 2.2rem; 
            margin-top: -2rem; 
        } 
        .up-arrow { 
            width: 0;  
            height: 0;  
            border-left: 50px solid transparent; 
            border-right: 50px solid transparent; 
              
            border-bottom: 50px solid green; 
  
            margin: 2rem; 
            } 
    </style> 
    <title>How do CSS triangles work?</title> 
</head> 
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>How do CSS triangles work?</h3> 
    <div class="up-arrow"></div> 
</body> 
</html>

Output:

Example 2: In the below code border-top property is used to make a down-arrowed triangle.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <style> 
        h1{ 
            color: green; 
            margin: 2rem; 
        } 
        h3{ 
            margin: 2.2rem; 
            margin-top: -2rem; 
        } 
        .down-arrow { 
            width: 0;  
            height: 0;  
            border-left: 50px solid transparent; 
            border-right: 50px solid transparent; 
              
            border-top: 50px solid green; 
  
            margin: 2rem; 
            } 
    </style> 
    <title>How do CSS triangles work?</title> 
</head> 
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>How do CSS triangles work?</h3> 
    <div class="down-arrow"></div> 
</body> 
</html>