CSS Triangle & Arrow Generator
Generate CSS triangles with the border trick.
Pick direction, size & color — copy code instantly.
About
The CSS Triangle Generator creates CSS triangles using the classic border trick — no images needed. It supports all 8 directions (up, down, left, right, and 4 diagonals).
Perfect for speech bubbles, dropdown arrows, navigation chevrons, and any UI decoration. The generated code can be pasted directly into your project. All processing is done locally in your browser.
How to Use
Choose Direction
Select from the 3×3 grid which direction your triangle should point. All 8 positions are supported.
Adjust Parameters
Use the width, height sliders and the color picker to customize your triangle. The preview updates in real time.
Copy Code
Click "Copy CSS" or "Copy HTML" to copy the generated code to your clipboard and paste it into your project.
Glossary
- Border Trick
- A CSS technique for creating triangles by setting width and height to 0, then applying colored and transparent borders.
- transparent
- A CSS color value meaning fully transparent. Used to hide the unwanted sides of the border to form a triangle shape.
- clip-path
- A CSS property that clips an element to a shape. An alternative to the border trick, supports more complex shapes but requires modern browsers.
- Speech Bubble
- A balloon-shaped UI element used in chat interfaces. A triangle forms the "tail" pointing to the speaker.
- Pseudo-element (::before/::after)
- CSS virtual elements used to attach the triangle to a box without adding extra HTML markup.
FAQ
- Q.Border trick vs. clip-path — which should I use?
- The border trick works in IE11 and all modern browsers. clip-path supports more complex shapes but may not work in older browsers. Either is fine for modern projects.
- Q.Can I make an equilateral triangle?
- You can approximate one by adjusting the width-to-height ratio. For an upward triangle, set width ≈ height × 2 as a starting point.
- Q.Is any data sent to a server?
- No. Everything is generated locally in your browser. No data is transmitted.
- Q.Can I make a responsive triangle?
- Replace the generated px values with em, rem, or vw units manually to make the triangle scale responsively.
Use Cases
Chat Speech Bubbles
Add a triangle 'tail' to message balloons in chat or notification UIs.
Accordion & Dropdown Arrows
Use up/down triangles to indicate open/close states for menus and accordions.
Custom Select Arrows
Replace default select box arrows with styled CSS triangles.
Carousel Navigation
Create left/right arrow buttons for image sliders and carousels without using icon fonts.