There are triangular unicode characters. You could draw a triangle in SVG. But there is another way to draw a triangle on the web, involving nothing but the border property and a little CSS trickery.
Imagine an element with a thick border:
.triangle {
width: 200px;
height: 200px;
border: 10px solid black;
}
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2017/05/triangle-1.png?ssl=1)
Now imagine all four borders have different colors:
.triangle {
...
border-left-color: red;
border-right-color: yellowgreen;
border-top-color: orange;
border-bottom-color: rebeccapurple;
}
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2017/05/triangle-2.png?ssl=1)
Notice how the borders meet each other at angles?
Look what happens when we collapse the element to zero width and height:
.triangle {
...
width: 0;
height: 0;
}
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2017/05/triangle-3-1.png?ssl=1)
If three of those borders were transparent
, we’d have a triangle!
.triangle {
...
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: rebeccapurple;
}
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2017/05/triangle-4.png?ssl=1)
Nice.
This could be useful on something like a pointing bubble of text. In that case, you could add the triangle to another element via a pseudo-element. Here’s a complete example:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2017/05/triangle-5.png?ssl=1)