How does a CSS triangle actually work?

A zero-size box with transparent borders on two sides and a solid-color border on the third - the visible border edge renders as a triangle.

Does this tool send my input anywhere?

No - the CSS is generated entirely in your browser.

Build a pure-CSS triangle (the zero-size-box-plus-borders trick) in any direction.

Direction

Size (px)

Color

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

How does a CSS triangle actually work?: A zero-size box with transparent borders on two sides and a solid-color border on the third - the visible border edge renders as a triangle.
Does this tool send my input anywhere?: No - the CSS is generated entirely in your browser.