CSS Triangle Generator
Generate a pure-CSS triangle using the border trick, in any direction and size.
About this tool
Generate a pure-CSS triangle using the classic border trick — no images or SVG needed — in any of the four main directions.
Key Features
- Up, down, left, or right direction
- Adjustable size and color
- Live preview
- Pure CSS, no images or SVG
How to Use
- Choose a direction.
- Adjust size and color.
- Copy the generated CSS.
Benefits
- Create dropdown arrows, speech bubble tails, or decorative shapes
- Avoid an extra image request for a simple shape
- Get a crisp shape that scales perfectly at any resolution
Frequently Asked Questions
A zero-width, zero-height element has four borders that meet at a point in the center. Making three of those borders transparent and only one colored leaves just that one border's triangular corner visible, which reads visually as a solid triangle. It is a clever repurposing of how borders render at sharp corners, not a dedicated CSS shape feature.
For a simple solid-color triangle, the CSS border trick avoids an extra file request, resizes with pure CSS, and needs no image editing software. SVG is a better choice for more complex shapes, gradients within the shape, or when you need the triangle as a genuinely separate, reusable graphic asset.
Yes — since the shape is just a styled element, a CSS transform: rotate(45deg) (or any other angle) applied to it will rotate the triangle to point in a custom direction beyond the four generated here.