How To Create CSS Triangle Shapes

In this topic,

We are going to see how to create a triangle shape using CSS.

I have made all shapes using borders.

1. Triangle Up Shape

#1: Create Html Code in the index.html file.

<div class="arrow-up"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid #000;
}

Output:

 

2. Triangle Down Shape

#1: Create Html Code in the index.html file.

<div class="arrow-down"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-down {
   width: 0; 
   height: 0; 
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
   border-top: 60px solid #000;
 }

Output:

 

3. Triangle Left Shape

#1: Create Html Code in the index.html file.

<div class="arrow-left"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent; 
    border-right:60px solid #000; 
  }

Output:

 

4. Triangle Right Shape

#1: Create Html Code in the index.html file.

<div class="arrow-right"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #000;
  }

Output:

 

5. Triangle Top Left Shape

#1: Create Html Code in the index.html file.

<div class="arrow-top-left"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-top-left{
    width: 0;
    height: 0;
    border-right: 90px solid transparent;
    border-top: 90px solid #000;
 }

Output:

 

6. Triangle Top Right Shape

#1: Create Html Code in the index.html file.

<div class="arrow-top-right"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-top-right{
   width: 0;
   height: 0;
   border-bottom: 90px solid transparent;
   border-right: 90px solid #000;
 }

Output:

 

7. Triangle Bottom Left Shape

#1: Create Html Code in the index.html file.

<div class="arrow-bottom-left"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-bottom-left{
    width: 0;
    height: 0;
    border-top: 90px solid transparent;
    border-right: 90px solid #000;
 }

Output:

 

8. Triangle Bottom Right Shape

#1: Create Html Code in the index.html file.

<div class="arrow-bottom-right"></div>

#2: Add CSS Code in the <style>…</style> on the index.html file.

.arrow-bottom-right{
   width: 0;
   height: 0;
   border-top: 90px solid transparent;
   border-right: 90px solid #000;
 }

Output: