Creating Triangles with CSS

What many people don’t know is that when you are drawing borders in CSS you are actually drawing triangles. Four triangles each represent one border of a box. With coloring one border and setting the others to transparent, you can create a singular triangle.
As you can see in the box below, we have four triangles in different colors.

border-color: red green blue yellow;
border-style: solid;
border-width: 20px;
height: 0px;
width: 0px;

When creating the singular triangle we set a color on one border and the rest transparent. It is done easily yet this is a technique that not many know.

border-color: transparent transparent blue transparent;

We set the border style to solid but when you change this style you will get different results, some examples:

border-style: dotted;

border-style: inset;

border-style: outset;

border-style: double;