It uses transparent borders on a zero-size element, coloring only one side.

Can I use it for arrows?

Yes, CSS triangles are common for tooltips and dropdown arrows.

CSS Triangle Generator

Generate CSS triangles using the border trick.

DirectionWidth: 80pxHeight: 60pxColor

width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 60px solid #6366f1;

Create a pure-CSS triangle in any direction, size and color, and copy the border code.

How does it work?: It uses transparent borders on a zero-size element, coloring only one side.
Can I use it for arrows?: Yes, CSS triangles are common for tooltips and dropdown arrows.