About this tool
Draw a CSS triangle and copy the border trick.
Pick a direction, a size, and a color. The shape is an empty box whose borders meet. Up and down use a transparent left and right border. Left and right use a transparent top and bottom border. The colored border is the face you see.
The triangle is not an SVG and it has no image file to download. A border triangle does not scale like a vector if you only change the font size. Change the pixel size here and copy the new rule.
Read the privacy line on this page before you use the result in public.
Quick steps
- Draw a CSS triangle and copy the border trick.
- Pick a direction, a size, and a color. The shape is an empty box whose borders meet. Up and down use a transparent left and right border. Left and right use a transparent top and bottom border. The colored border is the face you see.
- The triangle is not an SVG and it has no image file to download. A border triangle does not scale like a vector if you only change the font size. Change the pixel size here and copy the new rule.
Read the privacy line on this page before you use the result in public.
FAQ
Draw a CSS triangle and copy the border trick.
Pick a direction, a size, and a color. The shape is an empty box whose borders meet. Up and down use a transparent left and right border. Left and right use a transparent top and bottom border. The colored border is the face you see.
The triangle is not an SVG and it has no image file to download. A border triangle does not scale like a vector if you only change the font size. Change the pixel size here and copy the new rule.
Read the privacy line on this page before you use the result in public.