Generator trójkątów CSS
Create pure CSS triangles using the border trick. Choose direction, size, and color.
CSS Code
How CSS Triangles Work
CSS triangles are created by setting the element's width and height to 0 and using thick borders. By making three of the four borders transparent and coloring one, you get a triangle shape pointing in the desired direction. This classic CSS trick is supported in every browser.
When should I use CSS triangles?
CSS triangles are useful for tooltips, dropdown arrows, breadcrumbs, and decorative elements. They're lightweight and don't require images or SVGs.
How It Works
- Choose direction: Select which direction the triangle points — up, down, left, right, or diagonal.
- Set dimensions and color: Enter the width, height, and fill color using a color picker or hex value.
- Preview live: The triangle renders in real time as you adjust settings.
- Copy the CSS: Copy the generated CSS using the border-trick technique to paste into your stylesheet.
Why Use CSS Triangle Generator?
CSS triangles are created using the border trick: an element with zero width and height has visible borders on adjacent sides. When three of the four borders are made transparent, the visible border forms a triangle shape. This technique is used for dropdown menu carets, speech bubble tails, decorative arrows, accordion toggle indicators, tooltip pointers, and divider shapes. Pure CSS triangles are faster than SVG or image files, require no additional HTTP requests, and scale with the text. However, the border math is confusing — this generator handles all the calculations automatically.
Available Triangle Types
- Up / Down — pointing upward or downward (isosceles)
- Left / Right — pointing left or right
- Top-left / Top-right — corner triangles
- Bottom-left / Bottom-right — corner triangles pointing in opposite direction
- Custom aspect — adjustable width-to-height ratio for non-equilateral shapes