CSS tricks - Use CSS alone to make triangles

Using pure CSS you can create cross-browser compatible triangles with very little code!

The idea is use a thick border.

 

Group 1 Arrow, Minimum code

Group 2 Arrow, a little more code

Code sample

.arrow-up {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
}


Arrow Used in ::before Pseudo-Element

This is content for the tool tip, it has arrow on the left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur quam porta. Suspendisse eu sagittis quam.

 

reference article and apply to tooltip

Generate arrow code

Generate any angle code

The Shapes of CSS (link)

CSS mask shapes, Shape adjustment tool