CSS Triangle Generator
With this generator, you will be able to create the necessary CSS code for a triangle. Start by selecting the direction of the triangle, then depending on the direction, you will be able to create either an isoscele, equilateral or scalene triangle. Select the color you would like to make the triangle and finally you can change the size and rotation of the triangle. Once you are happy with the final selection, just copy the code to the clipboard and paste into your project.
CSS Triangle Generator
User Guide
This tool is a high-precision geometry and CSS generator. It allows you to design triangles using three distinct web technologies while providing real-time mathematical feedback.
1. Triangle Classifications
The lab supports three geometric types, which dictate how the vertices (points) behave:
Isosceles: Two sides of equal length. The peak is automatically locked to the horizontal center (50%).
Equilateral: All three sides are equal. The height is mathematically locked to 86.6% of the width to maintain perfect symmetry.
Scalene: All sides can be different lengths. This unlocks the Skew slider, allowing you to move the peak vertex anywhere along the horizontal axis.
2. Rendering Methods
Depending on your project's needs, you can export the triangle in three formats:
| Method | Description | Best For... |
|---|---|---|
| Clip Path | Uses the modern clip-path: polygon() property. |
Responsive layouts and UI backgrounds. |
| Border | The "Classic" hack using thick borders on 0px elements. | Legacy browsers and simple tooltips. |
| SVG | Generates a vector <polygon> element. |
High-fidelity graphics and complex animations. |
| Pseudo | Creates the triangle using a ::before or ::after pseudo-element. |
Tooltips, speech bubbles, badges, and UI accents without extra markup. |
3. Core Features & Toggles
The D-Pad (Snap Directions)
The 8-way directional pad allows you to "snap" the triangle's orientation.
Cardinal Directions (Up, Down, Left, Right): Create standard pointing triangles.
Ordinal Directions (Corners): Generate right-angled triangles pinned to specific corners.
Note: Corner snaps are disabled for Equilateral triangles as they cannot mathematically be right-angled.
Show Tooltips
When enabled, the lab performs real-time Trigonometry to display:
Side Lengths ( px ): Calculated using the Pythagorean distance formula.
Interior Angles ( ° ): Calculated using the Law of Cosines:
The tooltips are "method-aware," meaning they will align correctly even when using the complex coordinate system of the Border method.
Lock Settings
By default, the lab "Hard Resets" your dimensions when you change directions or triangle types to ensure a clean preview.
Unlocked: Changing direction resets Width/Height to 200px and Rotation to 0°.
Locked: Keeps your custom Width, Height, and Rotation intact while you flip through different directions or shapes. This is perfect for comparing how the same "size" looks in different orientations.
About CSS Triangle Generator
A CSS triangle generator is a free online tool that allows you to create triangles and other arrow-like shapes using CSS. With CSS, you can create various shapes and designs without the need for image files or complex graphics software. Triangles are a common shape used for creating arrows, tooltips, or decorative elements in web design.
To create a CSS triangle, you use properties like border-width, border-style, and border-color to manipulate the borders of an HTML element (usually a div or span) in a way that results in a triangular shape. By adjusting these properties, you can control the size, direction, and appearance of the triangle.
This generator provides a user-friendly interface where you can adjust parameters like size, color, and direction, and will generate the corresponding CSS code for you to use in your web project.
Creating triangles and other shapes with CSS can be useful for adding design elements to your website, and it's often a more efficient and flexible solution than using images for simple geometric shapes.
Frequently Asked Questions
How do you make a triangle in CSS?
The classic technique uses a zero-width, zero-height element with thick borders. By setting the element's width and height to 0, making all four borders thick and solid, and then setting three of the four border colours to transparent, the single visible border renders as a triangle. For example, a downward-pointing triangle is produced with border-left: 50px solid transparent;, border-right: 50px solid transparent;, and border-top: 100px solid red;.
Modern alternatives include clip-path: polygon() for responsive layouts, inline SVG <polygon> for high-fidelity graphics, and pseudo-elements (::before or ::after) to avoid adding extra markup to your HTML.
What is the difference between the border, clip-path, SVG, and pseudo-element methods?
The border method is the classic CSS hack - it uses a zero-size element with transparent borders to produce a triangle. It has excellent browser support but relies on a somewhat unintuitive trick and can be harder to animate.
The clip-path method uses the modern clip-path: polygon() property to mask a regular element into a triangular shape. It works well in responsive layouts and is easy to transition with CSS animations.
The SVG method generates an inline <polygon> element, giving you vector-quality output that scales perfectly at any size and supports complex animations.
The pseudo-element method applies the triangle via a ::before or ::after pseudo-element, keeping your HTML clean and making it ideal for tooltips, speech bubbles, and UI accents that should not add extra DOM nodes.
What is the difference between an isosceles, equilateral, and scalene CSS triangle?
An isosceles triangle has two sides of equal length. In CSS terms the peak is centred horizontally at 50%, giving a symmetrical left-right appearance. An equilateral triangle has all three sides equal. The height is mathematically fixed at approximately 86.6% of the width to maintain perfect symmetry, so you cannot set width and height independently. A scalene triangle has all three sides at different lengths. This unlocks a skew control that lets you move the peak vertex anywhere along the horizontal axis, giving you complete freedom over the triangle's proportions.
How do I make a CSS triangle point in a specific direction?
With the border method, the direction the triangle points is controlled by which border you make visible. To point up, set border-bottom to your chosen colour and the left and right borders to transparent. To point down, use border-top as the visible border. To point left, use border-right, and to point right, use border-left.
For diagonal or corner-pinned triangles, make two adjacent borders visible instead of one. With clip-path and SVG you simply adjust the polygon coordinates directly to point the triangle wherever you need.
How do I create a CSS triangle using clip-path?
Apply clip-path: polygon() to any element and supply three coordinate pairs representing the three vertices. Coordinates are given as percentages or pixel values from the top-left of the element. For example, a downward-pointing triangle on a 200×200px element would be: clip-path: polygon(0% 0%, 100% 0%, 50% 100%);. To point upward: clip-path: polygon(50% 0%, 100% 100%, 0% 100%);. Using percentages makes the triangle fully responsive - it scales with the element automatically.
How do I make a CSS triangle with a border or outline?
The border-trick method does not support an outline on the triangle edge because the shape is formed by the border itself. The most common workaround is to stack two triangles using ::before and ::after pseudo-elements - place a slightly larger triangle of the border colour behind a smaller triangle of the fill colour to simulate a stroked edge.
Alternatively, use the clip-path method and apply a CSS filter: drop-shadow() which correctly follows the clipped shape, or use the SVG method where you can set a genuine stroke attribute on the <polygon> element.
How do I make a transparent or hollow CSS triangle?
A fully transparent triangle with only a visible border is easiest to achieve with SVG - set the <polygon> fill to none and give it a stroke colour and width.
With the border trick, true transparency is not straightforward because the shape is made from solid border colours. The stacked pseudo-element workaround mentioned above can simulate it on solid backgrounds, but will not work over images or gradients.
The clip-path method also does not natively support a stroked outline, so SVG is the most reliable choice when you need a hollow triangle.
How do I make a CSS tooltip arrow or speech bubble point?
The pseudo-element method is the standard approach. Add a ::before or ::after pseudo-element to your tooltip container, position it absolutely at the edge where you want the arrow, and use the border trick to render a small triangle pointing outward.
For example, to add a downward arrow to the bottom of a tooltip, set the pseudo-element to position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); with border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333;. This keeps your HTML clean with no extra elements.
Can I animate a CSS triangle?
Yes, though the method affects how easily it animates. The clip-path method is the most animation-friendly - you can smoothly transition between two polygon() values as long as both have the same number of points, using a standard CSS transition or @keyframes rule.
The border method is harder to animate because the shape depends on border widths, and transitioning multiple border values simultaneously can produce unexpected intermediate states.
SVG triangles can be animated using CSS or SMIL and give you the most control for complex motion.
Is the CSS border triangle method still worth using in modern projects?
It depends on your browser support requirements. The border trick has near-universal support and is still a perfectly valid approach for simple tooltips or decorative arrows, especially if you need to support older browsers.
For modern projects, clip-path: polygon() is generally the cleaner and more maintainable choice - it is more readable, easier to animate, and works naturally with responsive layouts. SVG is preferable when you need precise strokes, gradients on the shape, or complex animation. The pseudo-element approach remains the best option when you want to avoid adding extra HTML elements.