CSS driehoek- en pijlgenerator
Genereer CSS-driehoeken met behulp van de grens-techniek. Pas richting, grootte en kleur aan met een live preview. Kopieer direct de CSS-code. Gratis, geen registratie vereist.
Misschien ook interessant
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 older browsers. clip-path supports more complex shapes but may not work in all 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.
- Q.Can it generate CSS for an entire speech bubble?
- This tool focuses solely on generating the CSS for the triangle portion. An entire speech bubble is typically implemented by combining the triangle with ::before/::after pseudo-elements.
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.
Feedback sturen
Laat ons uw mening weten om ons te helpen de tool te verbeteren.
Feedback wordt tijdelijk opgeschort
De server is overbelast of spambeveiliging is actief. Probeer het later opnieuw.