How to make triangle with css

Learn how to create a triangle with just CSS.

Some thing like this

To understand how to create a triangle we should have a good knowledge of the box model. We will be mostly using the border property of the HTML element to create the desired shape.

This is how the value of each border side is assigned to the element.

Have a better visual understanding of this will helps to create different types of triangle shapes.

div{
  width: 0;
  height: 0; 
  border:100px solid; 
  border-color: red green yellow purple; 
}

When we create an element with only borders all the border comes to meet at the center. We can now by seeing this visual representation can create our own triangular shape for different directions.

Top pointing triangle with CSS

To create the top pointing triangle we don’t define the top border because this where we want our pointer to be.

Then we define the left, right, and bottom side of the border but keep the left and right side transparent because we want the color from bottom to top.

div {
 width: 0; 
 height: 0; 
 width: 60px;  
 border-left: solid 100px transparent; 
 border-right: solid 100px transparent;
 border-bottom: solid 100px yellow;
}

Similarly, we can create the triangle pointing in other directions as well.

---

Bottom pointing triangle

div {
 width: 0; 
 height: 0; 
 width: 60px;  
 border-left: solid 100px transparent; 
 border-right: solid 100px transparent;
 border-top: solid 100px red;
}

---

Left pointing triangle

div {
 width: 0; 
 height: 0; 
 width: 60px;  
 border-top: solid 100px transparent; 
 border-bottom: solid 100px transparent;
 border-left: solid 100px purple;
}

---

Left pointing triangle

div {
 width: 0; 
 height: 0; 
 width: 60px;  
 border-top: solid 100px transparent; 
 border-bottom: solid 100px transparent;
 border-right: solid 100px green;
}

---

Here are a few other examples of creating triangles pointing to top-left, top-right, bottom-left and bottom-right directions.

Top-left pointing triangle with css

div {
  width: 100px;
  height: 100px;
  border-top: solid 50px red;
  border-bottom: solid 50px transparent;
  border-left: solid 50px purple;
  border-right: solid 50px transparent;
  
}

---

Top-right pointing triangle

div {
  width: 100px;
  height: 100px;
  border-top: solid 50px red;
  border-bottom: solid 50px transparent;
  border-left: solid 50px transparent;
  border-right: solid 50px green;
}

---

Bottom-left pointing triangle

div {
  width: 100px;
  height: 100px;
  border-top: solid 50px transparent;
  border-bottom: solid 50px yellow;
  border-left: solid 50px purple;
  border-right: solid 50px transparent;
}

---

Bottom-right pointing triangle with css

div {
  width: 100px;
  height: 100px;
  border-top: solid 50px transparent;
  border-bottom: solid 50px yellow;
  border-left: solid 50px transparent;
  border-right: solid 50px green;
}