Triangles are commonly drawn with the border property. Let's see the process of coming up with a basic triangle.

# Steps to create a basic triangle

1. Draw a simple square with a big border. 

.triangle{
    height: 20px;
    width: 20px;
    border: 90px solid #74C3E1;
}


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

2. Reduce the square size to zero, leaving only the border behind.

.triangle{
    height: 0px;
    width: 0px;
    border: 100px solid #74C3E1;
}

3. ​Now divide the border into 4 segments:
    - border-top
    - border-bottom
    - border-left
    - border-right

4. Let's give them different colors for now.

.triangle{
    height: 0px;
    width: 0px;
    border-top: 100px solid #74C3E1;
    border-bottom: 100px solid #45597e;
    border-left: 100px solid #FF8882;
    border-right: 100px solid #FFCDB2;
    
}

5. To extract a single triangle out of it:

     - Delete the opposite triangle.
     - Set the adjacent triangles to transparent.

     For example, to retrieve the bottom triangle, delete the top triangle, and set the left and right triangles to transparent.

.triangle{
    height: 0px;
    width: 0px;
    border-bottom: 100px solid #45597e;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    
}

6. Note that you can directly get 4 different right-angled triangles by picking up 2 triangles, rather than just 1, from the original 4.

.triangle{
    height: 0px;
    width: 0px;
    border-top: 150px solid transparent;
    border-bottom: 150px solid #45597e;
    border-left: 150px solid #FF8882;
    border-right: 150px solid transparent;
    
}

How to create a triangle in CSS

Draw a square, reduce its size to zero, and modify borders to create a triangle.