CSS 삼각형 생성기

CSS triangles are created using borders. When an element has zero width and height but thick borders, the borders meet at 45-degree angles. By making three borders transparent and one solid color, you get a triangle pointing in the direction of the solid border. This is a classic CSS trick that requires zero external resources.

Absolutely. CSS triangles are supported in all modern browsers and have been for over a decade. They are commonly used for dropdown arrows, tooltip pointers, speech bubble tails, step indicators, and decorative elements on major websites.

Triangle presets create pure triangles with zero width/height. Arrow presets add a rectangular base to the triangle, creating an arrow shape that is useful for navigation indicators, back-to-top buttons, and directional pointers.

A true equilateral triangle in CSS requires a specific border-width ratio because the visible triangle is actually a 45-degree isosceles right triangle formed by the border corners. To approximate an equilateral triangle, the height needs to be about 86.6% of the base width (√3/2 ratio), which this tool calculates automatically for you.