From Tutorialzine –Finally! CSS Triangles Without Ugly Hacks:
“
In this quick tutorial we show you how to use the clip-path property to effortlessly create CSS-only triangles. No borders or unicode involved. Anyone who has tried to make HTML upvote arrows, speech bubbles or other pointy elements, knows that in order to create a CSS-only triangle you have to use some sort of hack. The two most popular solutions are to create your triangles out of borders, or to use unicode characters.
”